From 69ec02c89e8a9f459121f46c046b9cef18777e62 Mon Sep 17 00:00:00 2001 From: Nada Date: Wed, 31 Jul 2024 14:48:55 +0400 Subject: [PATCH 01/19] fix: bug fixes --- .../PaymentMethodCard/PaymentMethodCard.tsx | 9 ++++++--- .../PaymentMethodCardBody.tsx | 7 ++++++- .../PopoverDropdown/PopoverDropdown.scss | 4 ++-- .../AdConditionBlockElement.tsx | 2 +- .../AdConditionBlockSelector.tsx | 2 +- .../AdConditionsSection.tsx | 10 ++++++++-- .../AdPaymentSelection/AdPaymentSelection.tsx | 2 +- .../OrderTimeSelection/OrderTimeSelection.scss | 8 ++++++++ .../OrderTimeSelection/OrderTimeSelection.tsx | 3 ++- .../PreferredCountriesSelector.scss | 1 - .../PreferredCountriesSelector.tsx | 2 +- .../SellAdPaymentSelection.scss | 18 ++++++++++++++++-- .../SellAdPaymentSelection.tsx | 5 +++-- 13 files changed, 55 insertions(+), 18 deletions(-) diff --git a/src/components/PaymentMethodCard/PaymentMethodCard.tsx b/src/components/PaymentMethodCard/PaymentMethodCard.tsx index 74451dd3..7f2235d1 100644 --- a/src/components/PaymentMethodCard/PaymentMethodCard.tsx +++ b/src/components/PaymentMethodCard/PaymentMethodCard.tsx @@ -1,4 +1,4 @@ -import { HTMLAttributes } from 'react'; +import { ComponentProps, HTMLAttributes } from 'react'; import clsx from 'clsx'; import { TAdvertiserPaymentMethod, TPaymentMethod } from 'types'; import { LabelPairedPlusLgBoldIcon } from '@deriv/quill-icons'; @@ -18,6 +18,7 @@ type TPaymentMethodCardProps = HTMLAttributes & { paymentMethod: { isAvailable?: boolean } & (TAdvertiserPaymentMethod | TPaymentMethod); selectedPaymentMethodIds?: number[]; shouldShowPaymentMethodDisplayName?: boolean; + textSize?: ComponentProps['size']; }; const PaymentMethodCard = ({ @@ -31,6 +32,7 @@ const PaymentMethodCard = ({ paymentMethod, selectedPaymentMethodIds = [], shouldShowPaymentMethodDisplayName, + textSize, }: TPaymentMethodCardProps) => { const { display_name: displayName, isAvailable, type } = paymentMethod; @@ -57,7 +59,7 @@ const PaymentMethodCard = ({ {displayName} ) : ( - <> +
onSelectPaymentMethodCard?.(Number(paymentMethod.id))}> - +
)} ); diff --git a/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx b/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx index cc61a2da..e73100c9 100644 --- a/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx +++ b/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx @@ -1,3 +1,4 @@ +import { ComponentProps } from 'react'; import { TAccount, TBankName, THooks, TName } from 'types'; import { Text, useDevice } from '@deriv-com/ui'; import './PaymentMethodCardBody.scss'; @@ -5,11 +6,13 @@ import './PaymentMethodCardBody.scss'; type TPaymentMethodCardBodyProps = { paymentMethod: THooks.AdvertiserPaymentMethods.Get[number] | THooks.PaymentMethods.Get[number]; shouldShowPaymentMethodDisplayName?: boolean; + size?: ComponentProps['size']; }; const PaymentMethodCardBody = ({ paymentMethod, shouldShowPaymentMethodDisplayName = true, + size, }: TPaymentMethodCardBodyProps) => { const displayName = paymentMethod?.display_name; const modifiedDisplayName = displayName?.replace(/\s|-/gm, ''); @@ -18,7 +21,9 @@ const PaymentMethodCardBody = ({ 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} diff --git a/src/components/PopoverDropdown/PopoverDropdown.scss b/src/components/PopoverDropdown/PopoverDropdown.scss index 548e1171..78fbbbc2 100644 --- a/src/components/PopoverDropdown/PopoverDropdown.scss +++ b/src/components/PopoverDropdown/PopoverDropdown.scss @@ -25,10 +25,10 @@ width: 19.5rem; box-shadow: 0px 32px 64px 0px #0e0e0e24; z-index: 999; - top: 2.8rem; + top: 3.8rem; position: absolute; background: #fff; - right: 0; + right: 1rem; &-item { padding: 1rem 1.6rem; diff --git a/src/pages/my-ads/components/AdConditionBlockElement/AdConditionBlockElement.tsx b/src/pages/my-ads/components/AdConditionBlockElement/AdConditionBlockElement.tsx index e16253c0..0d4e00bf 100644 --- a/src/pages/my-ads/components/AdConditionBlockElement/AdConditionBlockElement.tsx +++ b/src/pages/my-ads/components/AdConditionBlockElement/AdConditionBlockElement.tsx @@ -18,7 +18,7 @@ const AdConditionBlockElement = ({ isSelected, label, onClick, value }: TAdCondi })} onClick={() => onClick(value)} > - + {label}
diff --git a/src/pages/my-ads/components/AdConditionBlockSelector/AdConditionBlockSelector.tsx b/src/pages/my-ads/components/AdConditionBlockSelector/AdConditionBlockSelector.tsx index b3de1468..d246b328 100644 --- a/src/pages/my-ads/components/AdConditionBlockSelector/AdConditionBlockSelector.tsx +++ b/src/pages/my-ads/components/AdConditionBlockSelector/AdConditionBlockSelector.tsx @@ -11,7 +11,7 @@ type TAdConditionBlockSelectorProps = { const AdConditionBlockSelector = ({ onClick, selectedValue, type }: TAdConditionBlockSelectorProps) => { const { localize } = useTranslations(); return ( -
+
{getAdConditionContent(localize)[type]?.options?.map(option => ( diff --git a/src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx b/src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx index a5048fa8..ad71297b 100644 --- a/src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx +++ b/src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx @@ -33,7 +33,13 @@ const AdConditionsSection = ({ countryList, currency, localCurrency, rateType, . const onClickBlockSelector = (value: number, type: string) => { if (type === AD_CONDITION_TYPES.JOINING_DATE) { - setValue('min-join-days', value); + if (getValues('min-join-days') === value) { + setValue('min-join-days', 0); + } else { + setValue('min-join-days', value); + } + } else if (getValues('min-completion-rate') === value) { + setValue('min-completion-rate', null); } else { setValue('min-completion-rate', value); } @@ -52,7 +58,7 @@ const AdConditionsSection = ({ countryList, currency, localCurrency, rateType, . type={getValues('ad-type')} />
- + diff --git a/src/pages/my-ads/components/AdPaymentSelection/AdPaymentSelection.tsx b/src/pages/my-ads/components/AdPaymentSelection/AdPaymentSelection.tsx index 84f40168..521f9681 100644 --- a/src/pages/my-ads/components/AdPaymentSelection/AdPaymentSelection.tsx +++ b/src/pages/my-ads/components/AdPaymentSelection/AdPaymentSelection.tsx @@ -18,7 +18,7 @@ const AdPaymentSelection = ({ return ( <> -
+
diff --git a/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.scss b/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.scss index 442c9bde..1cf5e56f 100644 --- a/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.scss +++ b/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.scss @@ -1,5 +1,13 @@ .order-time-selection { margin: 1rem 0; + + @include desktop { + & .deriv-dropdown { + & .deriv-input__container { + width: 100%; + } + } + } } @include mobile-or-tablet-screen { diff --git a/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx b/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx index 536201cf..dcc1dbfb 100644 --- a/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx +++ b/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx @@ -73,7 +73,8 @@ const OrderTimeSelection = ({ orderExpiryOptions }: { orderExpiryOptions: TOrder } - list={getOptions()} + isFullWidth={isDesktop} + list={getOptions().sort((a, b) => b.value - a.value)} name='order-completion-time' onSelect={onChange} shouldClearValue diff --git a/src/pages/my-ads/components/PreferredCountriesSelector/PreferredCountriesSelector.scss b/src/pages/my-ads/components/PreferredCountriesSelector/PreferredCountriesSelector.scss index bf4d4fba..a92ca296 100644 --- a/src/pages/my-ads/components/PreferredCountriesSelector/PreferredCountriesSelector.scss +++ b/src/pages/my-ads/components/PreferredCountriesSelector/PreferredCountriesSelector.scss @@ -1,7 +1,6 @@ .preferred-countries-selector { display: flex; flex-direction: column; - gap: 0.8rem; &__field { display: flex; diff --git a/src/pages/my-ads/components/PreferredCountriesSelector/PreferredCountriesSelector.tsx b/src/pages/my-ads/components/PreferredCountriesSelector/PreferredCountriesSelector.tsx index 1327725c..cc52f7b9 100644 --- a/src/pages/my-ads/components/PreferredCountriesSelector/PreferredCountriesSelector.tsx +++ b/src/pages/my-ads/components/PreferredCountriesSelector/PreferredCountriesSelector.tsx @@ -40,7 +40,7 @@ const PreferredCountriesSelector = ({ countryList, type }: TPreferredCountriesSe
setIsModalOpen(true)}> {getSelectedCountriesText()} diff --git a/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.scss b/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.scss index de61d568..944857bd 100644 --- a/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.scss +++ b/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.scss @@ -2,6 +2,14 @@ &__card { display: inline-flex; flex-wrap: wrap; + + @include desktop { + & .payment-method-card--medium { + height: 11.4rem; + width: 16rem; + min-height: unset; + } + } @include mobile-or-tablet-screen { flex-wrap: nowrap; width: calc(100vw - 3.2rem); @@ -34,11 +42,17 @@ border: 1px dashed #d6dadb; min-height: 12.8rem; + @include desktop { + width: 16rem; + height: 11.4rem; + min-height: unset; + } + @include mobile-or-tablet-screen { margin-right: 0; - min-height: 8.8rem; + min-height: 10.6rem; padding: 0.9rem 1rem; - min-width: 13.6rem; + min-width: 15.4rem; } } } diff --git a/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.tsx b/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.tsx index 42978326..7dd77406 100644 --- a/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.tsx +++ b/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.tsx @@ -14,7 +14,7 @@ type TSellAdPaymentSelectionProps = { selectedPaymentMethodIds: number[]; }; const SellAdPaymentSelection = ({ onSelectPaymentMethod, selectedPaymentMethodIds }: TSellAdPaymentSelectionProps) => { - const { isDesktop } = useDevice(); + const { isDesktop, isMobile } = useDevice(); const isAdvertiser = useIsAdvertiser(); const { data: advertiserPaymentMethods, get } = api.advertiserPaymentMethods.useGet(); const { hideModal, isModalOpenFor, showModal } = useModalManager({ shouldReinitializeModals: false }); @@ -54,6 +54,7 @@ const SellAdPaymentSelection = ({ onSelectPaymentMethod, selectedPaymentMethodId onSelectPaymentMethodCard={onSelectPaymentMethod} paymentMethod={paymentMethod} selectedPaymentMethodIds={selectedPaymentMethodIds} + textSize={isMobile ? 'md' : 'xs'} /> ); })} @@ -65,7 +66,7 @@ const SellAdPaymentSelection = ({ onSelectPaymentMethod, selectedPaymentMethodId > - +
From 58956db1aea9d9d831d6feec484cbfe3ad53fd50 Mon Sep 17 00:00:00 2001 From: Nada Date: Wed, 31 Jul 2024 15:33:19 +0400 Subject: [PATCH 02/19] fix: temp barred user create ad button enabled --- .../p2p-advertiser/useAdvertiserUpdate.ts | 1 + .../MyAds/MyAdsTable/MyAdsDisplayWrapper.tsx | 6 ++++-- .../__tests__/MyAdsDisplayWrapper.spec.tsx | 14 ++++++++++++++ src/pages/my-ads/screens/MyAdsEmpty/MyAdsEmpty.tsx | 4 +++- .../MyAdsEmpty/__tests__/MyAdsEmpty.spec.tsx | 9 ++++++++- 5 files changed, 30 insertions(+), 4 deletions(-) diff --git a/src/hooks/api/advertiser/p2p-advertiser/useAdvertiserUpdate.ts b/src/hooks/api/advertiser/p2p-advertiser/useAdvertiserUpdate.ts index 2fa2313b..b1c5d0df 100644 --- a/src/hooks/api/advertiser/p2p-advertiser/useAdvertiserUpdate.ts +++ b/src/hooks/api/advertiser/p2p-advertiser/useAdvertiserUpdate.ts @@ -23,6 +23,7 @@ const useAdvertiserUpdate = () => { } = useP2pAdvertiserUpdate({ onSuccess: () => { invalidate('p2p_advertiser_info'); + invalidate('p2p_advertiser_adverts'); }, }); diff --git a/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.tsx b/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.tsx index d3fb70fa..eb7f410a 100644 --- a/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.tsx +++ b/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.tsx @@ -2,6 +2,7 @@ import { PropsWithChildren } from 'react'; import { useHistory } from 'react-router-dom'; import { FullPageMobileWrapper } from '@/components'; import { MY_ADS_URL } from '@/constants'; +import { useIsAdvertiserBarred } from '@/hooks'; import { Localize } from '@deriv-com/translations'; import { Button, useDevice } from '@deriv-com/ui'; import { MyAdsToggle } from '../MyAdsToggle'; @@ -13,6 +14,7 @@ type TMyAdsDisplayWrapperProps = { const MyAdsDisplayWrapper = ({ children, isPaused, onClickToggle }: PropsWithChildren) => { const { isDesktop } = useDevice(); + const isAdvertiserBarred = useIsAdvertiserBarred(); const history = useHistory(); const goToCreateAd = () => history.push(`${MY_ADS_URL}/adForm?formAction=create`); @@ -21,7 +23,7 @@ const MyAdsDisplayWrapper = ({ children, isPaused, onClickToggle }: PropsWithChi return ( ( - )} @@ -36,7 +38,7 @@ const MyAdsDisplayWrapper = ({ children, isPaused, onClickToggle }: PropsWithChi return ( <>
- diff --git a/src/pages/my-ads/screens/MyAds/MyAdsTable/__tests__/MyAdsDisplayWrapper.spec.tsx b/src/pages/my-ads/screens/MyAds/MyAdsTable/__tests__/MyAdsDisplayWrapper.spec.tsx index 6f02d85f..655b403c 100644 --- a/src/pages/my-ads/screens/MyAds/MyAdsTable/__tests__/MyAdsDisplayWrapper.spec.tsx +++ b/src/pages/my-ads/screens/MyAds/MyAdsTable/__tests__/MyAdsDisplayWrapper.spec.tsx @@ -1,3 +1,4 @@ +import { useIsAdvertiserBarred } from '@/hooks'; import { useDevice } from '@deriv-com/ui'; import { render, screen } from '@testing-library/react'; import MyAdsDisplayWrapper from '../MyAdsDisplayWrapper'; @@ -14,6 +15,10 @@ jest.mock('@deriv-com/ui', () => ({ }), })); +jest.mock('@/hooks', () => ({ + useIsAdvertiserBarred: jest.fn().mockReturnValue(false), +})); + const mockUseDevice = useDevice as jest.Mock; describe('MyAdsDisplayWrapper', () => { @@ -36,4 +41,13 @@ describe('MyAdsDisplayWrapper', () => { ); expect(screen.getByTestId('dt_full_page_mobile_wrapper')).toBeInTheDocument(); }); + it('should render the create ad button as disabled when advertiser is temp barred from creating ads', () => { + (useIsAdvertiserBarred as jest.Mock).mockReturnValue(true); + render( + +
children
+ + ); + expect(screen.getByRole('button', { name: 'Create new ad' })).toBeDisabled(); + }); }); diff --git a/src/pages/my-ads/screens/MyAdsEmpty/MyAdsEmpty.tsx b/src/pages/my-ads/screens/MyAdsEmpty/MyAdsEmpty.tsx index d0958989..b8d6c026 100644 --- a/src/pages/my-ads/screens/MyAdsEmpty/MyAdsEmpty.tsx +++ b/src/pages/my-ads/screens/MyAdsEmpty/MyAdsEmpty.tsx @@ -1,7 +1,7 @@ import { useHistory } from 'react-router-dom'; import { NicknameModal } from '@/components/Modals'; import { MY_ADS_URL } from '@/constants'; -import { useIsAdvertiser, useModalManager } from '@/hooks/custom-hooks'; +import { useIsAdvertiser, useIsAdvertiserBarred, useModalManager } from '@/hooks/custom-hooks'; import { DerivLightIcCashierNoAdsIcon } from '@deriv/quill-icons'; import { Localize } from '@deriv-com/translations'; import { ActionScreen, Button, Text, useDevice } from '@deriv-com/ui'; @@ -10,6 +10,7 @@ const MyAdsEmpty = () => { const { isMobile } = useDevice(); const { hideModal, isModalOpenFor, showModal } = useModalManager(); const isAdvertiser = useIsAdvertiser(); + const isAdvertiserBarred = useIsAdvertiserBarred(); const history = useHistory(); const textSize = isMobile ? 'lg' : 'md'; return ( @@ -17,6 +18,7 @@ const MyAdsEmpty = () => { { if (isAdvertiser) history.push(`${MY_ADS_URL}/adForm?formAction=create`); else showModal('NicknameModal'); diff --git a/src/pages/my-ads/screens/MyAdsEmpty/__tests__/MyAdsEmpty.spec.tsx b/src/pages/my-ads/screens/MyAdsEmpty/__tests__/MyAdsEmpty.spec.tsx index f4e58c54..9c122a22 100644 --- a/src/pages/my-ads/screens/MyAdsEmpty/__tests__/MyAdsEmpty.spec.tsx +++ b/src/pages/my-ads/screens/MyAdsEmpty/__tests__/MyAdsEmpty.spec.tsx @@ -1,5 +1,5 @@ import { MY_ADS_URL } from '@/constants'; -import { useIsAdvertiser } from '@/hooks'; +import { useIsAdvertiser, useIsAdvertiserBarred } from '@/hooks'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import MyAdsEmpty from '../MyAdsEmpty'; @@ -32,6 +32,7 @@ jest.mock('@/components/Modals', () => ({ jest.mock('@/hooks/custom-hooks', () => ({ ...jest.requireActual('@/hooks/custom-hooks'), useIsAdvertiser: jest.fn().mockReturnValue(true), + useIsAdvertiserBarred: jest.fn().mockReturnValue(false), useModalManager: jest.fn(() => mockUseModalManager), })); @@ -59,4 +60,10 @@ describe('MyAdsEmpty', () => { await userEvent.click(createNewAdButton); expect(mockUseModalManager.showModal).toHaveBeenCalledWith('NicknameModal'); }); + + it('should render the button as disalbed when advertiser is barred', () => { + (useIsAdvertiserBarred as jest.Mock).mockReturnValue(true); + render(); + expect(screen.getByRole('button', { name: 'Create new ad' })).toBeDisabled(); + }); }); From f1426e86b92528497b269fababba00c9a2b6ebb5 Mon Sep 17 00:00:00 2001 From: Nada Date: Wed, 31 Jul 2024 15:43:26 +0400 Subject: [PATCH 03/19] fix: next button not enabled for first time in edit ad --- src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx index 012fc863..6337efd3 100644 --- a/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx +++ b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx @@ -93,6 +93,7 @@ const CreateEditAd = () => { getValues, handleSubmit, setValue, + trigger, } = methods; useEffect(() => { if (Object.keys(countryList as object).length > 0 && getValues('preferred-countries').length === 0) { @@ -211,6 +212,7 @@ const CreateEditAd = () => { ) ?? []; setValue('payment-method', paymentMethodKeys); } + trigger(); }, // eslint-disable-next-line react-hooks/exhaustive-deps [paymentMethodList, countryList] From 2d8c1536ea96b899d241b77a2c4ed616aa0b99ef Mon Sep 17 00:00:00 2001 From: Nada Date: Thu, 1 Aug 2024 11:58:00 +0400 Subject: [PATCH 04/19] fix: scroll issue --- .../OrderTimeSelection.scss | 8 +++--- .../OrderTimeSelection/OrderTimeSelection.tsx | 2 +- .../MyAds/MyAdsTable/MyAdsDisplayWrapper.scss | 27 +++++++++++++++++++ .../MyAds/MyAdsTable/MyAdsDisplayWrapper.tsx | 4 +++ .../screens/MyAds/MyAdsTable/MyAdsTable.scss | 2 +- 5 files changed, 36 insertions(+), 7 deletions(-) create mode 100644 src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.scss diff --git a/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.scss b/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.scss index 1cf5e56f..3e69df0f 100644 --- a/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.scss +++ b/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.scss @@ -1,11 +1,9 @@ .order-time-selection { margin: 1rem 0; - @include desktop { - & .deriv-dropdown { - & .deriv-input__container { - width: 100%; - } + & .deriv-dropdown { + & .deriv-input__container { + width: 100%; } } } diff --git a/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx b/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx index dcc1dbfb..07274636 100644 --- a/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx +++ b/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx @@ -74,7 +74,7 @@ const OrderTimeSelection = ({ orderExpiryOptions }: { orderExpiryOptions: TOrder className='items-center h-16' dropdownIcon={} isFullWidth={isDesktop} - list={getOptions().sort((a, b) => b.value - a.value)} + list={getOptions().sort((a, b) => a.value - b.value)} name='order-completion-time' onSelect={onChange} shouldClearValue diff --git a/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.scss b/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.scss new file mode 100644 index 00000000..36c3e2e6 --- /dev/null +++ b/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.scss @@ -0,0 +1,27 @@ +.my-ads-display-wrapper { + & .mobile-wrapper__footer { + position: fixed; + right: 0; + left: 0; + bottom: 0; + background-color: #fff; + z-index: 2; + } + + &--barred { + & .mobile-wrapper__body { + & .my-ads-table__list { + & .table { + &__content { + @include mobile-or-tablet-screen { + // stylelint-disable-next-line declaration-no-important + height: calc( + 100vh - 31rem + ) !important; //height of the header + inline message + toggle + footer + } + } + } + } + } + } +} diff --git a/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.tsx b/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.tsx index eb7f410a..e440b3f3 100644 --- a/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.tsx +++ b/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.tsx @@ -1,4 +1,5 @@ import { PropsWithChildren } from 'react'; +import clsx from 'clsx'; import { useHistory } from 'react-router-dom'; import { FullPageMobileWrapper } from '@/components'; import { MY_ADS_URL } from '@/constants'; @@ -22,6 +23,9 @@ const MyAdsDisplayWrapper = ({ children, isPaused, onClickToggle }: PropsWithChi if (!isDesktop) { return ( ( )} - renderHeader={() => } + renderHeader={() => ( + + )} shouldShowBackIcon={false} > {children} @@ -46,7 +48,7 @@ const MyAdsDisplayWrapper = ({ children, isPaused, onClickToggle }: PropsWithChi - +
{children} diff --git a/src/pages/my-ads/screens/MyAds/MyAdsToggle/MyAdsToggle.tsx b/src/pages/my-ads/screens/MyAds/MyAdsToggle/MyAdsToggle.tsx index 80457fd7..4eb1e240 100644 --- a/src/pages/my-ads/screens/MyAds/MyAdsToggle/MyAdsToggle.tsx +++ b/src/pages/my-ads/screens/MyAds/MyAdsToggle/MyAdsToggle.tsx @@ -3,17 +3,23 @@ import { Localize } from '@deriv-com/translations'; import { Text, ToggleSwitch, useDevice } from '@deriv-com/ui'; type TMyAdsToggleProps = { + isDisabled: boolean; isPaused: boolean; onClickToggle: () => void; }; -const MyAdsToggle = ({ isPaused, onClickToggle }: TMyAdsToggleProps) => { +const MyAdsToggle = ({ isDisabled, isPaused, onClickToggle }: TMyAdsToggleProps) => { const { isDesktop } = useDevice(); + return (
- +
); }; diff --git a/src/pages/my-ads/screens/MyAds/MyAdsToggle/__tests__/MyAdsToggle.spec.tsx b/src/pages/my-ads/screens/MyAds/MyAdsToggle/__tests__/MyAdsToggle.spec.tsx index 9b6d7f33..a432e3e7 100644 --- a/src/pages/my-ads/screens/MyAds/MyAdsToggle/__tests__/MyAdsToggle.spec.tsx +++ b/src/pages/my-ads/screens/MyAds/MyAdsToggle/__tests__/MyAdsToggle.spec.tsx @@ -10,6 +10,7 @@ jest.mock('@deriv-com/ui', () => ({ })); const mockProps = { + isDisabled: false, isPaused: false, onClickToggle: jest.fn(), }; From c28ee50c108a9289c39898aa6bb2c45732daee8e Mon Sep 17 00:00:00 2001 From: Nada Date: Fri, 2 Aug 2024 09:15:15 +0400 Subject: [PATCH 18/19] fix: ad summary --- .../AdConditionsSection/AdConditionsSection.tsx | 1 + .../AdPaymentDetailsSection.tsx | 1 + src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx | 10 ++++++++++ 3 files changed, 12 insertions(+) diff --git a/src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx b/src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx index ad71297b..0f548cb5 100644 --- a/src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx +++ b/src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx @@ -50,6 +50,7 @@ const AdConditionsSection = ({ countryList, currency, localCurrency, rateType, . return (
{ return steps; }; type FormValues = { + 'ad-rate-type': string; 'ad-type': 'buy' | 'sell'; amount: string; 'contact-details': string; @@ -92,6 +93,7 @@ const CreateEditAd = () => { formState: { isDirty }, getValues, handleSubmit, + reset, setValue, trigger, } = methods; @@ -101,6 +103,13 @@ const CreateEditAd = () => { } }, [countryList, getValues, setValue]); + useEffect(() => { + return () => { + reset(); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + const shouldNotShowArchiveMessageAgain = LocalStorageUtils.getValue( LocalStorageConstants.p2pArchiveMessage ); @@ -191,6 +200,7 @@ const CreateEditAd = () => { const setFormValues = useCallback( (formValues: TFormValuesInfo) => { setValue('form-type', 'edit'); + setValue('ad-rate-type', formValues.rate_type); setValue('ad-type', formValues.type); setValue('amount', formValues.amount.toString()); setValue('instructions', formValues.description); From 75cfbf0a606d88b97eb5041d405a074fc096b685 Mon Sep 17 00:00:00 2001 From: Nada Date: Fri, 2 Aug 2024 10:50:38 +0400 Subject: [PATCH 19/19] fix: ad row glitch --- .../AlertComponent/AlertComponent.scss | 4 +++ .../AlertComponent/AlertComponent.tsx | 25 ++++++++++++------- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/src/pages/my-ads/components/AlertComponent/AlertComponent.scss b/src/pages/my-ads/components/AlertComponent/AlertComponent.scss index 5c58e831..11dd18b4 100644 --- a/src/pages/my-ads/components/AlertComponent/AlertComponent.scss +++ b/src/pages/my-ads/components/AlertComponent/AlertComponent.scss @@ -14,4 +14,8 @@ margin-top: -0.4rem; margin-left: 1rem; } + + & .tooltip-menu-icon:hover { + background: none; + } } diff --git a/src/pages/my-ads/components/AlertComponent/AlertComponent.tsx b/src/pages/my-ads/components/AlertComponent/AlertComponent.tsx index 458d84ce..b0e296af 100644 --- a/src/pages/my-ads/components/AlertComponent/AlertComponent.tsx +++ b/src/pages/my-ads/components/AlertComponent/AlertComponent.tsx @@ -1,19 +1,26 @@ +import { TooltipMenuIcon } from '@/components/TooltipMenuIcon'; import { LegacyWarningIcon } from '@deriv/quill-icons'; -import { Button, Tooltip } from '@deriv-com/ui'; +import { useTranslations } from '@deriv-com/translations'; import './AlertComponent.scss'; type TAlertComponentProps = { onClick: () => void; }; -const AlertComponent = ({ onClick }: TAlertComponentProps) => ( -
- - - -
-); + +
+ ); +}; export default AlertComponent;