Merge pull request #231 from nada-deriv/nada/bug-fixes

fix: bug fixes
deriv-com · Aug 2, 2024 · c28bb34 · c28bb34
2 parents db7a958 + 75cfbf0
commit c28bb34
Show file tree

Hide file tree

Showing 35 changed files with 211 additions and 52 deletions.
diff --git a/...ents/Modals/PreferredCountriesModal/PreferredCountriesFooter/PreferredCountriesFooter.tsx b/...ents/Modals/PreferredCountriesModal/PreferredCountriesFooter/PreferredCountriesFooter.tsx
@@ -13,6 +13,7 @@ const PreferredCountriesFooter = ({ isDisabled, onClickApply, onClickClear }: TP
     return (
         <div className='flex gap-[0.8rem] w-full'>
             <Button
+                className='border-2'
                 color='black'
                 disabled={isDisabled}
                 isFullWidth

diff --git 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<HTMLDivElement> & {
     paymentMethod: { isAvailable?: boolean } & (TAdvertiserPaymentMethod | TPaymentMethod);
     selectedPaymentMethodIds?: number[];
     shouldShowPaymentMethodDisplayName?: boolean;
+    textSize?: ComponentProps<typeof Text>['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 = ({
                     <Text size='sm'>{displayName}</Text>
                 </div>
             ) : (
-                <>
+                <div onClick={() => onSelectPaymentMethodCard?.(Number(paymentMethod.id))}>
                     <PaymentMethodCardHeader
                         isDisabled={isDisabled}
                         isEditable={isEditable}
@@ -72,8 +74,9 @@ const PaymentMethodCard = ({
                     <PaymentMethodCardBody
                         paymentMethod={paymentMethod}
                         shouldShowPaymentMethodDisplayName={shouldShowPaymentMethodDisplayName}
+                        size={textSize}
                     />
-                </>
+                </div>
             )}
         </div>
     );

diff --git a/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx b/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx
@@ -1,15 +1,18 @@
+import { ComponentProps } from 'react';
 import { TAccount, TBankName, THooks, TName } from 'types';
 import { Text, useDevice } from '@deriv-com/ui';
 import './PaymentMethodCardBody.scss';
 
 type TPaymentMethodCardBodyProps = {
     paymentMethod: THooks.AdvertiserPaymentMethods.Get[number] | THooks.PaymentMethods.Get[number];
     shouldShowPaymentMethodDisplayName?: boolean;
+    size?: ComponentProps<typeof Text>['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 (
         <div className='payment-method-card__body'>
-            {isBankOrOther && !shouldShowPaymentMethodDisplayName ? null : <Text size={textSize}>{displayName}</Text>}
+            {isBankOrOther && !shouldShowPaymentMethodDisplayName ? null : (
+                <Text size={size ?? textSize}>{displayName}</Text>
+            )}
             <Text size={textSize}>
                 {(paymentMethod.fields?.bank_name as TBankName)?.value ?? (paymentMethod.fields?.name as TName)?.value}
             </Text>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1,19 +1,25 @@
 import { useEffect, useState } from 'react';
+import useInvalidateQuery from '../api/useInvalidateQuery';
 import { api } from '..';
 
 /**
  * Custom hook to check if the current user is temporarily barred from using P2P.
  * @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
@@ -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
@@ -18,7 +18,7 @@ const AdConditionBlockElement = ({ isSelected, label, onClick, value }: TAdCondi
             })}
             onClick={() => onClick(value)}
         >
-            <Text color={isSelected ? 'white' : 'prominent'} size={isDesktop ? 'md' : 'lg'}>
+            <Text color={isSelected ? 'white' : 'less-prominent'} size={isDesktop ? 'md' : 'lg'}>
                 {label}
             </Text>
         </div>

diff --git 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 (
-        <div className='flex flex-col gap-[0.8rem] mb-[2.4rem]'>
+        <div className='flex flex-col mb-[2.4rem]'>
             <AdConditionContentHeader type={type} />
             <div className='flex gap-[1.6rem]'>
                 {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
@@ -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 (
         <div className='ad-conditions-section'>
             <AdSummary
+                adRateType={getValues('ad-rate-type')}
                 currency={currency}
                 localCurrency={localCurrency as TCurrency}
                 offerAmount={errors.amount ? '' : getValues('amount')}
@@ -52,7 +59,7 @@ const AdConditionsSection = ({ countryList, currency, localCurrency, rateType, .
                 type={getValues('ad-type')}
             />
             <div className='flex flex-col my-[2.4rem]'>
-                <Text color='prominent' size={labelSize}>
+                <Text color='general' size={labelSize}>
                     <Localize i18n_default_text='Counterparty conditions (optional)' />
                 </Text>
                 <Text color='less-prominent' size={labelSize}>

diff --git 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 (
         <div className='p-[1.6rem] w-full lg:p-0'>
             <AdSummary
+                adRateType={getValues('ad-rate-type')}
                 currency={currency}
                 localCurrency={localCurrency as TCurrency}
                 offerAmount={errors.amount ? '' : getValues('amount')}

diff --git 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 (
         <>
-            <div className='mb-[2.4rem]'>
+            <div className='mb-[2.4rem] lg:mt-[3.2rem]'>
                 <Text as='div' color='prominent' size={textSize}>
                     <Localize i18n_default_text='Payment methods' />
                 </Text>

diff --git 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
@@ -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
@@ -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) => (
-    <div className='alert-component'>
-        <Tooltip message='Ad not listed' position='bottom'>
-            <Button className='p-0 hover:bg-none' color='white' onClick={onClick} variant='outlined'>
+const AlertComponent = ({ onClick }: TAlertComponentProps) => {
+    const { localize } = useTranslations();
+    return (
+        <div className='alert-component'>
+            <TooltipMenuIcon
+                as='button'
+                onClick={onClick}
+                tooltipContent={localize('Ad not listed')}
+                tooltipPosition='top'
+            >
                 <LegacyWarningIcon data-testid='dt_alert_icon' iconSize='xs' />
-            </Button>
-        </Tooltip>
-    </div>
-);
+            </TooltipMenuIcon>
+        </div>
+    );
+};
 
 export default AlertComponent;
diff --git 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
@@ -73,7 +73,8 @@ const OrderTimeSelection = ({ orderExpiryOptions }: { orderExpiryOptions: TOrder
                     <Dropdown
                         className='items-center h-16'
                         dropdownIcon={<LabelPairedChevronDownMdRegularIcon />}
-                        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
@@ -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
@@ -40,7 +40,7 @@ const PreferredCountriesSelector = ({ countryList, type }: TPreferredCountriesSe
             <div className='preferred-countries-selector__field' onClick={() => setIsModalOpen(true)}>
                 <Text
                     className='preferred-countries-selector__field__text'
-                    color='less-prominent'
+                    color={getValues('preferred-countries')?.length !== countries.length ? 'general' : 'less-prominent'}
                     size={isDesktop ? 'sm' : 'md'}
                 >
                     {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
@@ -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;
         }
     }
 }
-Original file line number
+Diff line change
@@ Expand Up @@
                 })}
                 onClick={() => onClick(value)}
             >
-                <Text color={isSelected ? 'white' : 'prominent'} size={isDesktop ? 'md' : 'lg'}>
+                <Text color={isSelected ? 'white' : 'less-prominent'} size={isDesktop ? 'md' : 'lg'}>
                     {label}
                 </Text>
             </div>
@@ Expand Down @@