fix: merge conflicts

.github/workflows/sync-translations.yml

@@ -15,7 +15,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Sync translations
-        uses: deriv-com/translations/.github/actions/extract_and_sync_translations@main
+        uses: deriv-com/translations/.github/actions/extract_and_sync_translations@master
         with:
           PROJECT_NAME: ${{ vars.VITE_PROJECT_NAME }}
           CROWDIN_BRANCH_NAME: ${{ vars.VITE_CROWDIN_BRANCH_NAME }}

src/components/Modals/EmailLinkVerifiedModal/EmailLinkVerifiedModal.tsx

@@ -27,9 +27,9 @@ const EmailLinkVerifiedModal = ({ isModalOpen, onRequestClose, onSubmit }: TEmai
                     {{name}} in your bank account or e-wallet, hit the button below to
                     complete the order.'
                         values={{
-                            amount: orderDetails?.amount,
+                            amount: orderDetails?.displayPaymentAmount,
                             currency: orderDetails?.local_currency,
-                            name: orderDetails.advertiser_details.name,
+                            name: orderDetails.otherUserDetails.name,
                         }}
                     />
                 </Text>

src/components/Modals/EmailLinkVerifiedModal/__tests__/EmailLinkVerifiedModal.spec.tsx

@@ -4,11 +4,11 @@ import EmailLinkVerifiedModal from '../EmailLinkVerifiedModal';
 jest.mock('@/providers/OrderDetailsProvider', () => ({
     useOrderDetails: jest.fn().mockReturnValue({
         orderDetails: {
-            advertiser_details: {
+            displayPaymentAmount: 100,
+            local_currency: 'USD',
+            otherUserDetails: {
                 name: 'Test',
             },
-            amount: 100,
-            local_currency: 'USD',
         },
     }),
 }));

src/components/Modals/FilterModal/FilterModalContent/FilterModalContent.tsx

@@ -42,7 +42,7 @@ const FilterModalContent = ({
                             key={option.text}
                             onClick={option.onClick}
                         >
-                            <div className='flex flex-col'>
+                            <div className='flex flex-col flex-1'>
                                 <Text size={textSize}>{option.text}</Text>
                                 <Text color='less-prominent' size={textSize}>
                                     {option.subtext}

src/components/Modals/InvalidVerificationLinkModal/InvalidVerificationLinkModal.tsx

@@ -33,26 +33,39 @@ const InvalidVerificationLinkModal = ({
             isOpen={isModalOpen}
             onRequestClose={onRequestClose}
         >
+            <Modal.Header hideBorder onRequestClose={onRequestClose} />
             <Modal.Body
                 className={clsx('flex flex-col items-center gap-[2.4rem] p-[2.4rem] lg:pb-[2.4rem] pb-0', {
                     'px-[1.4rem] gap-[1.4rem]': isExcessiveErrorMobile,
                 })}
             >
                 <DerivLightIcEmailVerificationLinkInvalidIcon height={iconSize} width={iconSize} />
-                <Text weight='bold'>
-                    <Localize i18n_default_text='Invalid verification link' />
-                </Text>
-                {error?.message && <Text align='center'>{error.message}</Text>}
+                {isInvalidVerification && (
+                    <Text color='prominent' weight='bold'>
+                        <Localize i18n_default_text='Invalid verification link' />
+                    </Text>
+                )}
+                {error?.message && (
+                    <Text align='center' weight={isInvalidVerification ? 'normal' : 'bold'}>
+                        {error.message}
+                    </Text>
+                )}
             </Modal.Body>
             <Modal.Footer
                 className={clsx('justify-center', {
                     'pt-2 min-h-fit': isExcessiveErrorMobile,
                 })}
                 hideBorder
             >
-                <Button onClick={mutate} size={isDesktop ? 'lg' : 'md'} textSize='sm'>
-                    <Localize i18n_default_text='Get new link' />
-                </Button>
+                {isInvalidVerification ? (
+                    <Button onClick={mutate} size={isDesktop ? 'lg' : 'md'} textSize='sm'>
+                        <Localize i18n_default_text='Get new link' />
+                    </Button>
+                ) : (
+                    <Button onClick={onRequestClose} size={isDesktop ? 'lg' : 'md'} textSize='sm'>
+                        <Localize i18n_default_text='OK' />
+                    </Button>
+                )}
             </Modal.Footer>
         </Modal>
     );

src/components/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

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>
     );

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>

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;

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%;
+        }
+    }
 }

src/hooks/api/advertiser/p2p-advertiser/useAdvertiserUpdate.ts

@@ -23,6 +23,7 @@ const useAdvertiserUpdate = () => {
     } = useP2pAdvertiserUpdate({
         onSuccess: () => {
             invalidate('p2p_advertiser_info');
+            invalidate('p2p_advertiser_adverts');
         },
     });
 

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', () => {

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;
 };

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;

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>

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 => (

src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx

@@ -43,7 +43,13 @@ const AdConditionsSection = ({
 
     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);
         }
@@ -58,6 +64,7 @@ const AdConditionsSection = ({
     return (
         <div className='ad-conditions-section'>
             <AdSummary
+                adRateType={getValues('ad-rate-type')}
                 currency={currency}
                 localCurrency={localCurrency as TCurrency}
                 offerAmount={errors.amount ? '' : getValues('amount')}
@@ -66,7 +73,7 @@ const AdConditionsSection = ({
                 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}>

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')}

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>

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 {

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;
+    }
 }

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;