From 49c4c579782122c87de5107c057a386170bed14e Mon Sep 17 00:00:00 2001 From: Nada Date: Fri, 24 May 2024 16:40:16 +0400 Subject: [PATCH 1/5] fix: blocked message for temp barred user, green save button for ad details --- .../AdvertiserName/AdvertiserName.tsx | 2 +- .../BlockUnblockUserModal.scss | 32 +----------- .../BlockUnblockUserModal.tsx | 51 ++++++++++++------- .../__tests__/BlockUnblockUserModal.spec.tsx | 7 +++ .../InvalidVerificationLinkModal.tsx | 8 +-- .../MyProfileAdDetails.scss | 7 +++ .../MyProfileAdDetails/MyProfileAdDetails.tsx | 12 ++++- .../MyProfileCounterpartiesTable.scss | 8 +-- .../MyProfileCounterpartiesTable.tsx | 34 +++++++++++-- .../MyProfileCounterpartiesTableRow.scss | 4 ++ .../MyProfileCounterpartiesTableRow.tsx | 23 +++++++-- .../MyProfileCounterpartiesTableRow.spec.tsx | 1 + 12 files changed, 120 insertions(+), 69 deletions(-) diff --git a/src/components/AdvertiserName/AdvertiserName.tsx b/src/components/AdvertiserName/AdvertiserName.tsx index a9f08093..33998aa3 100644 --- a/src/components/AdvertiserName/AdvertiserName.tsx +++ b/src/components/AdvertiserName/AdvertiserName.tsx @@ -23,7 +23,7 @@ const AdvertiserName = ({ advertiserStats, onClickBlocked }: TAdvertiserNameProp return (
- +
diff --git a/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.scss b/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.scss index 6863b49a..eb97e8c1 100644 --- 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 index 86d26c3b..120e2d48 100644 --- 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>; }; 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} > - - {getModalTitle()} - - - {getModalContent()} - -
+ + + {getModalTitle()} + + + + + {getModalContent()} + + + -
+ ); }; diff --git a/src/components/Modals/BlockUnblockUserModal/__tests__/BlockUnblockUserModal.spec.tsx b/src/components/Modals/BlockUnblockUserModal/__tests__/BlockUnblockUserModal.spec.tsx index 05779542..a1ee69b5 100644 --- a/src/components/Modals/BlockUnblockUserModal/__tests__/BlockUnblockUserModal.spec.tsx +++ b/src/components/Modals/BlockUnblockUserModal/__tests__/BlockUnblockUserModal.spec.tsx @@ -13,12 +13,14 @@ jest.mock('@/hooks', () => ({ useBlock: jest.fn(() => ({ mutate: mockUseBlockMutate, mutation: { + error: {}, isSuccess: false, }, })), useUnblock: jest.fn(() => ({ mutate: mockUseUnblockMutate, mutation: { + error: {}, isSuccess: false, }, })), @@ -26,6 +28,11 @@ jest.mock('@/hooks', () => ({ }, })); +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 index 0e98cffa..17de3bd3 100644 --- a/src/components/Modals/InvalidVerificationLinkModal/InvalidVerificationLinkModal.tsx +++ b/src/components/Modals/InvalidVerificationLinkModal/InvalidVerificationLinkModal.tsx @@ -52,9 +52,11 @@ const InvalidVerificationLinkModal = ({ )} - {error?.message && - {error.message} - } + {error?.message && ( + + {error.message} + + )} { 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} />
-
diff --git a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.scss b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.scss index ccdf90bb..92243ac1 100644 --- a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.scss +++ b/src/pages/my-profile/screens/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; } } diff --git a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.tsx b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.tsx index 8586a172..0e969d8e 100644 --- a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.tsx +++ b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.tsx @@ -1,7 +1,8 @@ -import { useEffect } from 'react'; +import { Dispatch, SetStateAction, useEffect, useState } from 'react'; import { api } from '@/hooks'; +import { DerivLightIcBlockedAdvertisersBarredIcon } from '@deriv/quill-icons'; import { Localize } from '@deriv-com/translations'; -import { Loader, Table, Text } from '@deriv-com/ui'; +import { Loader, Table, Text, useDevice } from '@deriv-com/ui'; import { MyProfileCounterpartiesEmpty } from '../MyProfileCounterpartiesEmpty'; import { MyProfileCounterpartiesTableRow } from '../MyProfileCounterpartiesTableRow'; import './MyProfileCounterpartiesTable.scss'; @@ -16,17 +17,23 @@ type TMyProfileCounterpartiesTableRowRendererProps = { id?: string; is_blocked: boolean; name?: string; + setErrorMessage: Dispatch>; }; const MyProfileCounterpartiesTableRowRenderer = ({ id, is_blocked: isBlocked, name, + setErrorMessage, }: TMyProfileCounterpartiesTableRowRendererProps) => ( - + ); -//TODO: rewrite the implementation in accordance with @deriv-com/ui table component const MyProfileCounterpartiesTable = ({ dropdownValue, searchValue, @@ -42,12 +49,17 @@ const MyProfileCounterpartiesTable = ({ is_blocked: dropdownValue === 'blocked' ? 1 : 0, trade_partners: 1, }); + const [errorMessage, setErrorMessage] = useState(''); + const { isMobile } = useDevice(); useEffect(() => { if (data.length > 0) { setShowHeader(true); } - }, [data, setShowHeader]); + if (errorMessage) { + setShowHeader(false); + } + }, [data, errorMessage, setShowHeader]); if (isLoading) { return ; @@ -62,6 +74,17 @@ const MyProfileCounterpartiesTable = ({ ); } + if (errorMessage) { + return ( +
+ + + {errorMessage} + +
+ ); + } + return ( ( )} tableClassname='my-profile-counterparties-table' diff --git a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/MyProfileCounterpartiesTableRow.scss b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/MyProfileCounterpartiesTableRow.scss index a691e367..bff4fded 100644 --- a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/MyProfileCounterpartiesTableRow.scss +++ b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/MyProfileCounterpartiesTableRow.scss @@ -12,5 +12,9 @@ align-items: center; gap: 0.8rem; cursor: pointer; + + &--barred { + cursor: not-allowed; + } } } diff --git a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/MyProfileCounterpartiesTableRow.tsx b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/MyProfileCounterpartiesTableRow.tsx index 1f3d51b0..c47f8201 100644 --- a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/MyProfileCounterpartiesTableRow.tsx +++ b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/MyProfileCounterpartiesTableRow.tsx @@ -1,9 +1,10 @@ -import { memo } from 'react'; +import { Dispatch, memo, SetStateAction } from 'react'; +import clsx from 'clsx'; import { useHistory } from 'react-router-dom'; import { UserAvatar } from '@/components'; import { BlockUnblockUserModal } from '@/components/Modals'; import { ADVERTISER_URL } from '@/constants'; -import { useModalManager } from '@/hooks/custom-hooks'; +import { useIsAdvertiserBarred, useModalManager } from '@/hooks/custom-hooks'; import { Button, Text, useDevice } from '@deriv-com/ui'; import './MyProfileCounterpartiesTableRow.scss'; @@ -11,19 +12,30 @@ type TMyProfileCounterpartiesTableRowProps = { id: string; isBlocked: boolean; nickname: string; + setErrorMessage: Dispatch>; }; -const MyProfileCounterpartiesTableRow = ({ id, isBlocked, nickname }: TMyProfileCounterpartiesTableRowProps) => { +const MyProfileCounterpartiesTableRow = ({ + id, + isBlocked, + nickname, + setErrorMessage, +}: TMyProfileCounterpartiesTableRowProps) => { const { isMobile } = useDevice(); const history = useHistory(); const { hideModal, isModalOpenFor, showModal } = useModalManager(); + const isAdvertiserBarred = useIsAdvertiserBarred(); return ( <>
history.push(`${ADVERTISER_URL}/${id}`, { from: 'MyProfile' })} + className={clsx('my-profile-counterparties-table-row__nickname-wrapper', { + 'my-profile-counterparties-table-row__nickname-wrapper--barred': isAdvertiserBarred, + })} + onClick={() => { + isAdvertiserBarred ? undefined : history.push(`${ADVERTISER_URL}/${id}`, { from: 'MyProfile' }); + }} > {nickname} @@ -46,6 +58,7 @@ const MyProfileCounterpartiesTableRow = ({ id, isBlocked, nickname }: TMyProfile isBlocked={isBlocked} isModalOpen={!!isModalOpenFor('BlockUnblockUserModal')} onRequestClose={hideModal} + setErrorMessage={setErrorMessage} /> ); diff --git a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx index 3fb4b5b5..c1713ca4 100644 --- a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx +++ b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx @@ -6,6 +6,7 @@ const mockProps = { id: 'id1', isBlocked: false, nickname: 'nickname', + setErrorMessage: jest.fn(), }; const mockPush = jest.fn(); From f9498080111096eef4e78771fa2e816dafb538ec Mon Sep 17 00:00:00 2001 From: Nada Date: Fri, 24 May 2024 16:55:51 +0400 Subject: [PATCH 2/5] fix: avatar resize issue fixed --- src/components/AdvertiserName/AdvertiserName.tsx | 8 ++++---- .../AdvertiserName/__tests__/AdvertiserName.spec.tsx | 8 +++++++- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/AdvertiserName/AdvertiserName.tsx b/src/components/AdvertiserName/AdvertiserName.tsx index 33998aa3..2a67923f 100644 --- 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 (
- +
@@ -38,8 +38,8 @@ const AdvertiserName = ({ advertiserStats, onClickBlocked }: TAdvertiserNameProp
- {isDesktop && isMyProfile && } - {isDesktop && !isMyProfile && !advertiserStats?.is_blocked && ( + {!isMobile && isMyProfile && } + {!isMobile && !isMyProfile && !advertiserStats?.is_blocked && ( )}
diff --git a/src/components/AdvertiserName/__tests__/AdvertiserName.spec.tsx b/src/components/AdvertiserName/__tests__/AdvertiserName.spec.tsx index 04aced61..1dd1fadc 100644 --- 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: 'test@gmail.com' })), })); 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', () => { From f1b4b781ce24cbae09a69e1c39ce9b59e2aaa7f9 Mon Sep 17 00:00:00 2001 From: Nada Date: Mon, 27 May 2024 10:20:15 +0400 Subject: [PATCH 3/5] fix: font sizes difference issue fixed --- .../AdvertiserName/AdvertiserNameStats.tsx | 2 +- .../ProfileBalance/ProfileBalance.tsx | 30 +++++++++---------- .../MyProfileStats/MyProfileStatsItem.tsx | 7 ++++- 3 files changed, 21 insertions(+), 18 deletions(-) diff --git a/src/components/AdvertiserName/AdvertiserNameStats.tsx b/src/components/AdvertiserName/AdvertiserNameStats.tsx index 36ea5fe7..232c7d5e 100644 --- a/src/components/AdvertiserName/AdvertiserNameStats.tsx +++ b/src/components/AdvertiserName/AdvertiserNameStats.tsx @@ -50,7 +50,7 @@ const AdvertiserNameStats = ({ advertiserStats }: { advertiserStats: DeepPartial {daysSinceJoined && daysSinceJoined > 0 ? ( ) : ( - + )}
diff --git a/src/components/ProfileContent/ProfileBalance/ProfileBalance.tsx b/src/components/ProfileContent/ProfileBalance/ProfileBalance.tsx index e076e4a5..35502499 100644 --- a/src/components/ProfileContent/ProfileBalance/ProfileBalance.tsx +++ b/src/components/ProfileContent/ProfileBalance/ProfileBalance.tsx @@ -10,7 +10,7 @@ import './ProfileBalance.scss'; const ProfileBalance = ({ advertiserStats }: { advertiserStats: DeepPartial }) => { const { data: activeAccount } = api.account.useActiveAccount(); - const { isDesktop } = useDevice(); + const { isMobile } = useDevice(); const [shouldShowAvailableBalanceModal, setShouldShowAvailableBalanceModal] = useState(false); const currency = activeAccount?.currency || 'USD'; @@ -36,6 +36,8 @@ const ProfileBalance = ({ advertiserStats }: { advertiserStats: DeepPartial
- + Available Deriv P2P Balance setShouldShowAvailableBalanceModal(true)} />
- + {numberToCurrencyText(advertiserStats?.balance_available || 0)} USD
@@ -62,25 +64,21 @@ const ProfileBalance = ({ advertiserStats }: { advertiserStats: DeepPartial {dailyLimits.map(({ available, dailyLimit, type }) => (
- {type} + {type}
- Daily limit - + + Daily limit + + {dailyLimit}
- Available - + + Available + + {available}
diff --git a/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsItem.tsx b/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsItem.tsx index 08ceadbe..39db5a27 100644 --- a/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsItem.tsx +++ b/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsItem.tsx @@ -40,6 +40,7 @@ const MyProfileStatsItem = ({ {shouldShowDuration && ( From 97f83cdb1527cd9eeb6a98cb523bc7ece5a69285 Mon Sep 17 00:00:00 2001 From: Nada Date: Mon, 27 May 2024 10:50:58 +0400 Subject: [PATCH 4/5] fix: added localize --- .../ProfileContent/ProfileBalance/ProfileBalance.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/ProfileContent/ProfileBalance/ProfileBalance.tsx b/src/components/ProfileContent/ProfileBalance/ProfileBalance.tsx index 35502499..d6300fb4 100644 --- a/src/components/ProfileContent/ProfileBalance/ProfileBalance.tsx +++ b/src/components/ProfileContent/ProfileBalance/ProfileBalance.tsx @@ -4,6 +4,7 @@ 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'; @@ -48,7 +49,7 @@ const ProfileBalance = ({ advertiserStats }: { advertiserStats: DeepPartial
- Available Deriv P2P Balance +
- Daily limit + {dailyLimit} @@ -76,7 +77,7 @@ const ProfileBalance = ({ advertiserStats }: { advertiserStats: DeepPartial
- Available + {available} From 0bc3dbf6eaba66065e037e19d0494aeced8b2288 Mon Sep 17 00:00:00 2001 From: Nada Date: Mon, 27 May 2024 11:31:03 +0400 Subject: [PATCH 5/5] fix: removed assertion --- .../MyProfileCounterpartiesTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.tsx b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.tsx index 0e969d8e..a6fe2382 100644 --- a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.tsx +++ b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.tsx @@ -27,7 +27,7 @@ const MyProfileCounterpartiesTableRowRenderer = ({ setErrorMessage, }: TMyProfileCounterpartiesTableRowRendererProps) => (