fix: blocked message for temp barred user, green save button for ad d…

…etails (#78) * fix: blocked message for temp barred user, green save button for ad details * fix: avatar resize issue fixed * fix: font sizes difference issue fixed * fix: added localize * fix: removed assertion
deriv-com · May 27, 2024 · 5b04099 · 5b04099
1 parent 14e980f
commit 5b04099
Show file tree

Hide file tree

Showing 16 changed files with 153 additions and 92 deletions.
diff --git a/src/components/AdvertiserName/AdvertiserName.tsx b/src/components/AdvertiserName/AdvertiserName.tsx
@@ -16,14 +16,14 @@ type TAdvertiserNameProps = {
 
 const AdvertiserName = ({ advertiserStats, onClickBlocked }: TAdvertiserNameProps) => {
     const { data } = useGetSettings();
-    const { isDesktop } = useDevice();
+    const { isMobile } = useDevice();
     const isMyProfile = getCurrentRoute() === 'my-profile';
 
     const name = advertiserStats?.name || data?.email;
 
     return (
         <div className='advertiser-name' data-testid='dt_advertiser_name'>
-            <UserAvatar nickname={name!} size={isDesktop ? 64 : 42} textSize='lg' />
+            <UserAvatar nickname={name ?? ''} size={isMobile ? 42 : 64} textSize='lg' />
             <div className='advertiser-name__details'>
                 <div className='flex items-center gap-3'>
                     <Text size='md' weight='bold'>
@@ -38,8 +38,8 @@ const AdvertiserName = ({ advertiserStats, onClickBlocked }: TAdvertiserNameProp
                 <AdvertiserNameStats advertiserStats={advertiserStats} />
                 <AdvertiserNameBadges advertiserStats={advertiserStats} />
             </div>
-            {isDesktop && isMyProfile && <AdvertiserNameToggle advertiserInfo={advertiserStats} />}
-            {isDesktop && !isMyProfile && !advertiserStats?.is_blocked && (
+            {!isMobile && isMyProfile && <AdvertiserNameToggle advertiserInfo={advertiserStats} />}
+            {!isMobile && !isMyProfile && !advertiserStats?.is_blocked && (
                 <BlockDropdown id={advertiserStats?.id} onClickBlocked={onClickBlocked} />
             )}
         </div>

diff --git a/src/components/AdvertiserName/AdvertiserNameStats.tsx b/src/components/AdvertiserName/AdvertiserNameStats.tsx
@@ -50,7 +50,7 @@ const AdvertiserNameStats = ({ advertiserStats }: { advertiserStats: DeepPartial
                     {daysSinceJoined && daysSinceJoined > 0 ? (
                         <Localize i18n_default_text='Joined {{daysSinceJoined}}d' values={{ daysSinceJoined }} />
                     ) : (
-                        <Localize i18n_default_text='Joined Today' />
+                        <Localize i18n_default_text='Joined today' />
                     )}
                 </Text>
             </div>

diff --git a/src/components/AdvertiserName/__tests__/AdvertiserName.spec.tsx b/src/components/AdvertiserName/__tests__/AdvertiserName.spec.tsx
@@ -10,12 +10,18 @@ const mockProps = {
 };
 
 jest.mock('@deriv-com/api-hooks', () => ({
+    ...jest.requireActual('@deriv-com/api-hooks'),
     useGetSettings: jest.fn(() => ({ email: '[email protected]' })),
 }));
 
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),
-    useDevice: jest.fn(() => ({ isMobile: false })),
+    useDevice: jest.fn(() => ({ isMobile: true })),
+}));
+
+jest.mock('@/utils', () => ({
+    ...jest.requireActual('@/utils'),
+    getCurrentRoute: jest.fn(() => ''),
 }));
 
 describe('AdvertiserName', () => {

diff --git a/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.scss b/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.scss
@@ -1,33 +1,3 @@
 .block-unblock-user-modal {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    right: auto;
-    bottom: auto;
-    margin-right: -50%;
-    transform: translate(-50%, -50%);
-    width: 44rem;
-    padding: 2.4rem;
-    border-radius: 8px;
-    background: #fff;
-    box-shadow: 0px 32px 64px 0px rgba(14, 14, 14, 0.14);
-
-    &__text {
-        margin: 2.4rem 0;
-
-        @include mobile {
-            margin: 1.6rem 0;
-        }
-    }
-
-    @include mobile {
-        padding: 1.6rem;
-        width: 32.8rem;
-    }
-
-    &__footer {
-        display: flex;
-        justify-content: flex-end;
-        gap: 0.8rem;
-    }
+    @include default-modal;
 }
diff --git a/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx b/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx
@@ -1,9 +1,7 @@
-import { useEffect } from 'react';
-import Modal from 'react-modal';
+import { Dispatch, SetStateAction, useEffect } from 'react';
 import { api } from '@/hooks';
 import { Localize } from '@deriv-com/translations';
-import { Button, Text } from '@deriv-com/ui';
-import { customStyles } from '../helpers';
+import { Button, Modal, Text, useDevice } from '@deriv-com/ui';
 import './BlockUnblockUserModal.scss';
 
 type TBlockUnblockUserModalProps = {
@@ -13,6 +11,7 @@ type TBlockUnblockUserModalProps = {
     isModalOpen: boolean;
     onClickBlocked?: () => void;
     onRequestClose: () => void;
+    setErrorMessage?: Dispatch<SetStateAction<string | undefined>>;
 };
 
 const BlockUnblockUserModal = ({
@@ -22,17 +21,28 @@ const BlockUnblockUserModal = ({
     isModalOpen,
     onClickBlocked,
     onRequestClose,
+    setErrorMessage,
 }: TBlockUnblockUserModalProps) => {
-    const { mutate: blockAdvertiser, mutation } = api.counterparty.useBlock();
-    const { mutate: unblockAdvertiser, mutation: unblockMutation } = api.counterparty.useUnblock();
+    const { isMobile } = useDevice();
+    const {
+        mutate: blockAdvertiser,
+        mutation: { error, isSuccess },
+    } = api.counterparty.useBlock();
+    const {
+        mutate: unblockAdvertiser,
+        mutation: { error: unblockError, isSuccess: unblockIsSuccess },
+    } = api.counterparty.useUnblock();
 
     useEffect(() => {
-        if (mutation.isSuccess || unblockMutation.isSuccess) {
+        if (isSuccess || unblockIsSuccess) {
             onClickBlocked?.();
             onRequestClose();
+        } else if (error || unblockError) {
+            setErrorMessage?.(error?.error.message || unblockError?.error.message);
+            onRequestClose();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [mutation.isSuccess, onClickBlocked, unblockMutation.isSuccess]);
+    }, [isSuccess, onClickBlocked, unblockIsSuccess, unblockError, error, setErrorMessage]);
 
     const getModalTitle = () => (isBlocked ? `Unblock ${advertiserName}?` : `Block ${advertiserName}?`);
 
@@ -64,15 +74,18 @@ const BlockUnblockUserModal = ({
             isOpen={isModalOpen}
             onRequestClose={onRequestClose}
             shouldCloseOnOverlayClick={false}
-            style={customStyles}
         >
-            <Text as='p' weight='bold'>
-                {getModalTitle()}
-            </Text>
-            <Text as='p' className='block-unblock-user-modal__text' size='sm'>
-                {getModalContent()}
-            </Text>
-            <div className='block-unblock-user-modal__footer'>
+            <Modal.Header className='px-[1.6rem] lg:px-[2.4rem]' hideBorder hideCloseIcon>
+                <Text as='p' size={isMobile ? 'lg' : 'md'} weight='bold'>
+                    {getModalTitle()}
+                </Text>
+            </Modal.Header>
+            <Modal.Body>
+                <Text as='p' className='px-[1.6rem] lg:px-[2.4rem]' size={isMobile ? 'md' : 'sm'}>
+                    {getModalContent()}
+                </Text>
+            </Modal.Body>
+            <Modal.Footer className='gap-[0.8rem] lg:px-[2.4rem] px-[1.6rem]' hideBorder>
                 <Button
                     className='border-2'
                     color='black'
@@ -81,12 +94,12 @@ const BlockUnblockUserModal = ({
                     textSize='sm'
                     variant='outlined'
                 >
-                    Cancel
+                    <Localize i18n_default_text='Cancel' />
                 </Button>
                 <Button onClick={onClickBlockUnblock} size='lg' textSize='sm'>
-                    {isBlocked ? 'Unblock' : 'Block'}
+                    {isBlocked ? <Localize i18n_default_text='Unblock' /> : <Localize i18n_default_text='Block' />}
                 </Button>
-            </div>
+            </Modal.Footer>
         </Modal>
     );
 };

diff --git a/src/components/Modals/BlockUnblockUserModal/__tests__/BlockUnblockUserModal.spec.tsx b/src/components/Modals/BlockUnblockUserModal/__tests__/BlockUnblockUserModal.spec.tsx
@@ -13,19 +13,26 @@ jest.mock('@/hooks', () => ({
             useBlock: jest.fn(() => ({
                 mutate: mockUseBlockMutate,
                 mutation: {
+                    error: {},
                     isSuccess: false,
                 },
             })),
             useUnblock: jest.fn(() => ({
                 mutate: mockUseUnblockMutate,
                 mutation: {
+                    error: {},
                     isSuccess: false,
                 },
             })),
         },
     },
 }));
 
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({ isMobile: false })),
+}));
+
 describe('BlockUnblockUserModal', () => {
     it('should render the modal with correct title and behaviour for blocking user', async () => {
         render(

diff --git a/src/components/Modals/InvalidVerificationLinkModal/InvalidVerificationLinkModal.tsx b/src/components/Modals/InvalidVerificationLinkModal/InvalidVerificationLinkModal.tsx
@@ -52,9 +52,11 @@ const InvalidVerificationLinkModal = ({
                         <Localize i18n_default_text='Invalid verification link' />
                     </Text>
                 )}
-                {error?.message && <Text align='center' weight={isInvalidVerification ? 'normal' : 'bold'}>
-                    {error.message}
-                </Text>}
+                {error?.message && (
+                    <Text align='center' weight={isInvalidVerification ? 'normal' : 'bold'}>
+                        {error.message}
+                    </Text>
+                )}
             </Modal.Body>
             <Modal.Footer
                 className={clsx('justify-center', {

diff --git a/src/components/ProfileContent/ProfileBalance/ProfileBalance.tsx b/src/components/ProfileContent/ProfileBalance/ProfileBalance.tsx
@@ -4,13 +4,14 @@ import { AvailableP2PBalanceModal } from '@/components/Modals';
 import { api } from '@/hooks';
 import { numberToCurrencyText } from '@/utils';
 import { LabelPairedCircleInfoMdRegularIcon } from '@deriv/quill-icons';
+import { Localize } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import { ProfileDailyLimit } from '../ProfileDailyLimit';
 import './ProfileBalance.scss';
 
 const ProfileBalance = ({ advertiserStats }: { advertiserStats: DeepPartial<TAdvertiserStats> }) => {
     const { data: activeAccount } = api.account.useActiveAccount();
-    const { isDesktop } = useDevice();
+    const { isMobile } = useDevice();
     const [shouldShowAvailableBalanceModal, setShouldShowAvailableBalanceModal] = useState(false);
 
     const currency = activeAccount?.currency || 'USD';
@@ -36,6 +37,8 @@ const ProfileBalance = ({ advertiserStats }: { advertiserStats: DeepPartial<TAdv
         ]
     );
 
+    const labelSize = isMobile ? 'md' : 'sm';
+
     return (
         <>
             <AvailableP2PBalanceModal
@@ -45,42 +48,38 @@ const ProfileBalance = ({ advertiserStats }: { advertiserStats: DeepPartial<TAdv
             <div className='profile-balance'>
                 <div className='profile-balance__amount' data-testid='dt_available_balance_amount'>
                     <div>
-                        <Text color='less-prominent' size={isDesktop ? 'sm' : 'xs'}>
-                            Available Deriv P2P Balance
+                        <Text color='less-prominent' size={isMobile ? 'xs' : 'sm'}>
+                            <Localize i18n_default_text='Available Deriv P2P Balance' />
                         </Text>
                         <LabelPairedCircleInfoMdRegularIcon
                             className='cursor-pointer fill-gray-400'
                             data-testid='dt_available_balance_icon'
                             onClick={() => setShouldShowAvailableBalanceModal(true)}
                         />
                     </div>
-                    <Text size={isDesktop ? 'xl' : '2xl'} weight='bold'>
+                    <Text size={isMobile ? '2xl' : 'xl'} weight='bold'>
                         {numberToCurrencyText(advertiserStats?.balance_available || 0)} USD
                     </Text>
                 </div>
                 <div className='flex flex-col gap-[1.6rem]'>
                     <div className='profile-balance__items'>
                         {dailyLimits.map(({ available, dailyLimit, type }) => (
                             <div className='profile-balance__item' key={type}>
-                                <Text>{type}</Text>
+                                <Text size={labelSize}>{type}</Text>
                                 <div className='profile-balance__item-limits'>
                                     <div data-testid={`dt_profile_balance_daily_${type.toLowerCase()}_limit`}>
-                                        <Text color='less-prominent'>Daily limit</Text>
-                                        <Text
-                                            className='profile-balance__label'
-                                            size={isDesktop ? 'sm' : 'md'}
-                                            weight='bold'
-                                        >
+                                        <Text color='less-prominent' size={labelSize}>
+                                            <Localize i18n_default_text='Daily limit' />
+                                        </Text>
+                                        <Text className='profile-balance__label' size={labelSize} weight='bold'>
                                             {dailyLimit}
                                         </Text>
                                     </div>
                                     <div data-testid={`dt_profile_balance_available_${type.toLowerCase()}_limit`}>
-                                        <Text color='less-prominent'>Available</Text>
-                                        <Text
-                                            className='profile-balance__label'
-                                            size={isDesktop ? 'sm' : 'md'}
-                                            weight='bold'
-                                        >
+                                        <Text color='less-prominent' size={labelSize}>
+                                            <Localize i18n_default_text='Available' />
+                                        </Text>
+                                        <Text className='profile-balance__label' size={labelSize} weight='bold'>
                                             {available}
                                         </Text>
                                     </div>

diff --git a/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss b/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss
@@ -26,4 +26,11 @@
             }
         }
     }
+
+    &__button {
+        &--submitting {
+            //TODO: add this variant to deriv-com/ui
+            background-color: #4bb4b3 !important;
+        }
+    }
 }
diff --git a/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.tsx b/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.tsx
@@ -2,6 +2,7 @@ import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
 import { FullPageMobileWrapper } from '@/components';
 import { api } from '@/hooks';
 import { useQueryString } from '@/hooks/custom-hooks';
+import { LabelPairedCheckMdFillIcon } from '@deriv/quill-icons';
 import { Localize, useTranslations } from '@deriv-com/translations';
 import { Button, Loader, Text, TextArea, useDevice } from '@deriv-com/ui';
 import './MyProfileAdDetails.scss';
@@ -49,7 +50,7 @@ const MyProfileAdDetailsTextArea = ({
 
 const MyProfileAdDetails = () => {
     const { data: advertiserInfo, isLoading } = api.advertiser.useGetInfo();
-    const { mutate: updateAdvertiser } = api.advertiser.useUpdate();
+    const { isPending, mutate: updateAdvertiser } = api.advertiser.useUpdate();
     const [contactInfo, setContactInfo] = useState('');
     const [advertDescription, setAdvertDescription] = useState('');
     const { isMobile } = useDevice();
@@ -116,7 +117,14 @@ const MyProfileAdDetails = () => {
                 setContactInfo={setContactInfo}
             />
             <div className='my-profile-ad-details__border' />
-            <Button disabled={!hasUpdated} onClick={submitAdDetails} size='lg' textSize='sm'>
+            <Button
+                className={isPending ? 'my-profile-ad-details__button--submitting' : ''}
+                disabled={!hasUpdated || isPending}
+                icon={isPending ? <LabelPairedCheckMdFillIcon fill='#fff' /> : null}
+                onClick={submitAdDetails}
+                size='lg'
+                textSize='sm'
+            >
                 <Localize i18n_default_text='Save' />
             </Button>
         </div>

diff --git a/...ns/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.scss b/...ns/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.scss
@@ -6,14 +6,16 @@
             height: calc(100vh - 30rem);
             max-height: 100%;
         }
+
+        &__row {
+            border-bottom: 1px solid #f2f3f4;
+        }
     }
 
     &__row {
         &:last-child {
             position: relative;
         }
-        &:not(:last-child) {
-            border-bottom: 1px solid #f2f3f4;
-        }
+        border-bottom: 1px solid #f2f3f4;
     }
 }