diff --git a/src/components/Modals/PreferredCountriesModal/PreferredCountriesFooter/PreferredCountriesFooter.tsx b/src/components/Modals/PreferredCountriesModal/PreferredCountriesFooter/PreferredCountriesFooter.tsx index fdfc526e..80dd23c0 100644 --- a/src/components/Modals/PreferredCountriesModal/PreferredCountriesFooter/PreferredCountriesFooter.tsx +++ b/src/components/Modals/PreferredCountriesModal/PreferredCountriesFooter/PreferredCountriesFooter.tsx @@ -13,6 +13,7 @@ const PreferredCountriesFooter = ({ isDisabled, onClickApply, onClickClear }: TP return (
) : ( - <> +
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/components/Wizard/Wizard.scss b/src/components/Wizard/Wizard.scss index 5a4b1e58..dd0709e9 100644 --- a/src/components/Wizard/Wizard.scss +++ b/src/components/Wizard/Wizard.scss @@ -2,4 +2,12 @@ width: inherit; height: inherit; max-width: 67.2rem; + + @include mobile-or-tablet-screen { + height: 100%; + + & .wizard__main-step { + height: 100%; + } + } } 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/hooks/custom-hooks/__tests__/useIsAdvertiserBarred.spec.ts b/src/hooks/custom-hooks/__tests__/useIsAdvertiserBarred.spec.ts index 6e1c1a25..09efce07 100644 --- a/src/hooks/custom-hooks/__tests__/useIsAdvertiserBarred.spec.ts +++ b/src/hooks/custom-hooks/__tests__/useIsAdvertiserBarred.spec.ts @@ -10,6 +10,9 @@ jest.mock('@/hooks', () => ({ }, })); +const mockInvalidate = jest.fn(); + +jest.mock('../../api/useInvalidateQuery', () => () => mockInvalidate); const mockUseGetInfo = api.advertiser.useGetInfo as jest.Mock; describe('useIsAdvertiserBarred', () => { diff --git a/src/hooks/custom-hooks/useIsAdvertiserBarred.ts b/src/hooks/custom-hooks/useIsAdvertiserBarred.ts index b1bb5cad..7e8401cb 100644 --- a/src/hooks/custom-hooks/useIsAdvertiserBarred.ts +++ b/src/hooks/custom-hooks/useIsAdvertiserBarred.ts @@ -1,4 +1,5 @@ import { useEffect, useState } from 'react'; +import useInvalidateQuery from '../api/useInvalidateQuery'; import { api } from '..'; /** @@ -6,14 +7,19 @@ import { api } from '..'; * @returns {boolean} isAdvertiserBarred - True if the current user is temporarily barred from using P2P, false otherwise. */ const useIsAdvertiserBarred = (): boolean => { - const { data } = api.advertiser.useGetInfo(); + const { data = {} } = api.advertiser.useGetInfo(); const [isAdvertiserBarred, setIsAdvertiserBarred] = useState(false); + const invalidate = useInvalidateQuery(); useEffect(() => { + invalidate('p2p_advertiser_adverts'); if (data.blocked_until) { setIsAdvertiserBarred(true); + } else { + setIsAdvertiserBarred(false); } - }, [data]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [data.blocked_until]); return isAdvertiserBarred; }; diff --git a/src/pages/my-ads/components/AdConditionBlockElement/AdConditionBlockElement.scss b/src/pages/my-ads/components/AdConditionBlockElement/AdConditionBlockElement.scss index 5eeda924..22415cda 100644 --- a/src/pages/my-ads/components/AdConditionBlockElement/AdConditionBlockElement.scss +++ b/src/pages/my-ads/components/AdConditionBlockElement/AdConditionBlockElement.scss @@ -12,12 +12,6 @@ width: 12.4rem; } - &:hover:not(&--selected) { - background-color: #d6dadb; - cursor: pointer; - color: #ffffff; - } - &:active, &--selected { background-color: #999999; border-color: #999999; 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..0f548cb5 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); } @@ -44,6 +50,7 @@ const AdConditionsSection = ({ countryList, currency, localCurrency, rateType, . return (
- + diff --git a/src/pages/my-ads/components/AdPaymentDetailsSection/AdPaymentDetailsSection.tsx b/src/pages/my-ads/components/AdPaymentDetailsSection/AdPaymentDetailsSection.tsx index eea5f66b..bcd7d492 100644 --- a/src/pages/my-ads/components/AdPaymentDetailsSection/AdPaymentDetailsSection.tsx +++ b/src/pages/my-ads/components/AdPaymentDetailsSection/AdPaymentDetailsSection.tsx @@ -51,6 +51,7 @@ const AdPaymentDetailsSection = ({ return (
-
+
diff --git a/src/pages/my-ads/components/AdTypeSection/AdTypeSection.scss b/src/pages/my-ads/components/AdTypeSection/AdTypeSection.scss index 3b196072..2d9ec2c5 100644 --- a/src/pages/my-ads/components/AdTypeSection/AdTypeSection.scss +++ b/src/pages/my-ads/components/AdTypeSection/AdTypeSection.scss @@ -8,7 +8,7 @@ @include mobile-or-tablet-screen { padding: 0 1.6rem; overflow: auto; - max-height: calc(100vh - 20rem); + max-height: calc(100% - 20rem); } &--edit { 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; diff --git a/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.scss b/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.scss index 442c9bde..17c3b3e3 100644 --- a/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.scss +++ b/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.scss @@ -1,5 +1,23 @@ .order-time-selection { margin: 1rem 0; + + & .deriv-dropdown { + &__items { + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.16); + } + & .deriv-input__container { + width: 100%; + } + + & .deriv-dropdown__items--xs { + margin-top: 0.5rem; + max-height: 20rem; + + @include mobile-or-tablet-screen { + 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..07274636 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) => a.value - b.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..97b0dc22 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; @@ -12,6 +11,10 @@ border: 1px solid #d6dadb; padding: 1rem 1.6rem; cursor: pointer; + border-radius: 4px; + @include mobile-or-tablet-screen { + width: 100%; + } &__text { width: 100%; diff --git a/src/pages/my-ads/components/PreferredCountriesSelector/PreferredCountriesSelector.tsx b/src/pages/my-ads/components/PreferredCountriesSelector/PreferredCountriesSelector.tsx index 1327725c..6c811078 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()} @@ -55,7 +55,10 @@ const PreferredCountriesSelector = ({ countryList, type }: TPreferredCountriesSe setValue('preferred-countries', selectedValues); setIsModalOpen(false); }} - onRequestClose={() => setIsModalOpen(false)} + onRequestClose={() => { + setSelectedValues(getValues('preferred-countries')); + setIsModalOpen(false); + }} selectedCountries={selectedValues} setSelectedCountries={setSelectedValues} /> 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 > - +
diff --git a/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.scss b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.scss index 1ca54e89..08ab6bb4 100644 --- a/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.scss +++ b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.scss @@ -3,4 +3,8 @@ max-height: calc(100vh - 19rem); overflow-y: auto; } + + @include mobile-or-tablet-screen { + height: 100%; + } } diff --git a/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx index 012fc863..6ae21626 100644 --- a/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx +++ b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx @@ -23,6 +23,7 @@ const getSteps = (localize: TLocalize, isEdit = false) => { return steps; }; type FormValues = { + 'ad-rate-type': string; 'ad-type': 'buy' | 'sell'; amount: string; 'contact-details': string; @@ -92,7 +93,9 @@ const CreateEditAd = () => { formState: { isDirty }, getValues, handleSubmit, + reset, setValue, + trigger, } = methods; useEffect(() => { if (Object.keys(countryList as object).length > 0 && getValues('preferred-countries').length === 0) { @@ -100,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 ); @@ -190,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); @@ -211,6 +222,7 @@ const CreateEditAd = () => { ) ?? []; setValue('payment-method', paymentMethodKeys); } + trigger(); }, // eslint-disable-next-line react-hooks/exhaustive-deps [paymentMethodList, countryList] @@ -233,7 +245,7 @@ const CreateEditAd = () => { }; return ( - <> +
{ isModalOpen={!!isModalOpenFor('AdCancelCreateEditModal')} onRequestClose={hideModal} /> - +
); }; diff --git a/src/pages/my-ads/screens/MyAds/MyAds.tsx b/src/pages/my-ads/screens/MyAds/MyAds.tsx index 00c9754a..d7720417 100644 --- a/src/pages/my-ads/screens/MyAds/MyAds.tsx +++ b/src/pages/my-ads/screens/MyAds/MyAds.tsx @@ -10,7 +10,7 @@ const MyAds = () => { if (!isPoaVerified || !isPoiVerified) return ; return ( -
+
{isAdvertiserBarred && }
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..3019929d --- /dev/null +++ b/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.scss @@ -0,0 +1,25 @@ +.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(100% - 10rem) !important; //height of the inline message + toggle + } + } + } + } + } + } +} diff --git a/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.tsx b/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.tsx index d3fb70fa..24fd19ef 100644 --- a/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.tsx +++ b/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.tsx @@ -1,10 +1,13 @@ import { PropsWithChildren } from 'react'; +import clsx from 'clsx'; 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'; +import './MyAdsDisplayWrapper.scss'; type TMyAdsDisplayWrapperProps = { isPaused: boolean; @@ -13,6 +16,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`); @@ -20,12 +24,17 @@ const MyAdsDisplayWrapper = ({ children, isPaused, onClickToggle }: PropsWithChi if (!isDesktop) { return ( ( - )} - renderHeader={() => } + renderHeader={() => ( + + )} shouldShowBackIcon={false} > {children} @@ -36,10 +45,10 @@ const MyAdsDisplayWrapper = ({ children, isPaused, onClickToggle }: PropsWithChi return ( <>
- - +
{children} diff --git a/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsTable.scss b/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsTable.scss index 242be8e8..28ff7025 100644 --- a/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsTable.scss +++ b/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsTable.scss @@ -13,7 +13,7 @@ @include mobile-or-tablet-screen { // stylelint-disable-next-line declaration-no-important - height: calc(100vh - 26rem) !important; + height: calc(100% - 4rem) !important; } } } 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/MyAds/MyAdsTableRow/MyAdsTableRow.tsx b/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRow.tsx index 0b79745c..ff67f51b 100644 --- a/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRow.tsx +++ b/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRow.tsx @@ -78,9 +78,8 @@ const MyAdsTableRow = ({ currentRateType, showModal, ...rest }: TMyAdsTableProps const enableActionPoint = currentRateType !== rateType; useEffect(() => { - setShowAlertIcon(enableActionPoint || shouldShowTooltipIcon(visibilityStatus) || !isListed); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [enableActionPoint, isListed, shouldShowTooltipIcon]); + setShowAlertIcon(enableActionPoint || shouldShowTooltipIcon(visibilityStatus) || !isAdvertListed); + }, [enableActionPoint, isAdvertListed, visibilityStatus]); const { displayEffectiveRate } = generateEffectiveRate({ exchangeRate, 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(), }; 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(); + }); });