From c3e4c5a5e33b304d9ad925888ee566d1790d8ea1 Mon Sep 17 00:00:00 2001 From: Farrah Mae Ochoa Date: Thu, 18 Jul 2024 15:39:39 +0400 Subject: [PATCH 01/10] fix: order page issues --- src/components/BlockedScenarios/BlockedScenarios.tsx | 6 +++--- .../BlockedScenarios/__tests__/BlockedScenarios.spec.tsx | 2 +- src/pages/orders/screens/OrderDetails/OrderDetails.scss | 2 +- src/pages/orders/screens/Orders/OrdersEmpty/OrdersEmpty.tsx | 2 +- .../Orders/OrdersEmpty/__tests__/OrdersEmpty.spec.tsx | 2 +- .../Orders/OrdersTable/__tests__/OrdersTable.spec.tsx | 2 +- 6 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/BlockedScenarios/BlockedScenarios.tsx b/src/components/BlockedScenarios/BlockedScenarios.tsx index 8098de5e..0268336d 100644 --- a/src/components/BlockedScenarios/BlockedScenarios.tsx +++ b/src/components/BlockedScenarios/BlockedScenarios.tsx @@ -53,18 +53,18 @@ const BlockedScenarios = ({ type }: { type: string }) => { crypto: { actionButton: ( ), description: ( - + ), icon: , title: ( - + ), }, diff --git a/src/components/BlockedScenarios/__tests__/BlockedScenarios.spec.tsx b/src/components/BlockedScenarios/__tests__/BlockedScenarios.spec.tsx index ddee343e..d0135003 100644 --- a/src/components/BlockedScenarios/__tests__/BlockedScenarios.spec.tsx +++ b/src/components/BlockedScenarios/__tests__/BlockedScenarios.spec.tsx @@ -30,7 +30,7 @@ describe('BlockedScenarios', () => { it('should render the correct message for crypto account', async () => { render(); - expect(screen.getByText('Crypto is not supported for Deriv P2P!')).toBeInTheDocument(); + expect(screen.getByText('Cryptocurrencies not supported')).toBeInTheDocument(); const button = screen.getByRole('button', { name: 'Switch to real USD account' }); await userEvent.click(button); expect(window.open).toHaveBeenCalledWith('https://app.deriv.com', '_blank'); diff --git a/src/pages/orders/screens/OrderDetails/OrderDetails.scss b/src/pages/orders/screens/OrderDetails/OrderDetails.scss index c1be7905..b96e67f5 100644 --- a/src/pages/orders/screens/OrderDetails/OrderDetails.scss +++ b/src/pages/orders/screens/OrderDetails/OrderDetails.scss @@ -1,5 +1,5 @@ .order-details { - overflow: overlay; + overflow: auto; height: calc(100vh - 27rem); @include mobile-or-tablet-screen { diff --git a/src/pages/orders/screens/Orders/OrdersEmpty/OrdersEmpty.tsx b/src/pages/orders/screens/Orders/OrdersEmpty/OrdersEmpty.tsx index d225b9fc..d7f191c9 100644 --- a/src/pages/orders/screens/Orders/OrdersEmpty/OrdersEmpty.tsx +++ b/src/pages/orders/screens/Orders/OrdersEmpty/OrdersEmpty.tsx @@ -28,7 +28,7 @@ const OrdersEmpty = ({ isPast = false }: TOrdersEmptyProps) => { {isPast ? ( ) : ( - + )} } diff --git a/src/pages/orders/screens/Orders/OrdersEmpty/__tests__/OrdersEmpty.spec.tsx b/src/pages/orders/screens/Orders/OrdersEmpty/__tests__/OrdersEmpty.spec.tsx index 705cfee2..a60e2234 100644 --- a/src/pages/orders/screens/Orders/OrdersEmpty/__tests__/OrdersEmpty.spec.tsx +++ b/src/pages/orders/screens/Orders/OrdersEmpty/__tests__/OrdersEmpty.spec.tsx @@ -18,7 +18,7 @@ jest.mock('react-router-dom', () => ({ describe('OrdersEmpty', () => { it('should render OrdersEmpty', () => { render(); - expect(screen.getByText('You have no orders.')).toBeInTheDocument(); + expect(screen.getByText('You have no active orders.')).toBeInTheDocument(); expect(screen.getByRole('button', { name: 'Buy/Sell' })).toBeInTheDocument(); }); it('should handle clicking on buy/sell button', async () => { diff --git a/src/pages/orders/screens/Orders/OrdersTable/__tests__/OrdersTable.spec.tsx b/src/pages/orders/screens/Orders/OrdersTable/__tests__/OrdersTable.spec.tsx index 156b147c..4c79019e 100644 --- a/src/pages/orders/screens/Orders/OrdersTable/__tests__/OrdersTable.spec.tsx +++ b/src/pages/orders/screens/Orders/OrdersTable/__tests__/OrdersTable.spec.tsx @@ -137,7 +137,7 @@ const mockUseDevice = useDevice as jest.Mock; describe('OrdersTable', () => { it('should render OrdersTable as expected with empty data', () => { render(); - expect(screen.getByText('You have no orders.')).toBeInTheDocument(); + expect(screen.getByText('You have no active orders.')).toBeInTheDocument(); }); it('should render the loader when isLoading', () => { render(); From c52449268fe1e8f4f6f51b58ef8fc7a5e55c9678 Mon Sep 17 00:00:00 2001 From: Farrah Mae Ochoa Date: Fri, 19 Jul 2024 10:02:01 +0400 Subject: [PATCH 02/10] fix: ui issues --- src/components/BuySellForm/BuySellForm.scss | 4 +++- src/components/BuySellForm/BuySellForm.tsx | 6 +++++- src/pages/advertiser/screens/Advertiser/Advertiser.scss | 2 +- src/pages/orders/screens/OrderDetails/OrderDetails.scss | 4 ++-- 4 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/BuySellForm/BuySellForm.scss b/src/components/BuySellForm/BuySellForm.scss index 54b564b9..706226e8 100644 --- a/src/components/BuySellForm/BuySellForm.scss +++ b/src/components/BuySellForm/BuySellForm.scss @@ -15,10 +15,12 @@ &--is-buy { height: 64.9rem; + & .deriv-modal__body { max-height: calc(100vh - 13rem); overflow: auto; } + @include mobile-or-tablet-screen { height: unset; max-height: unset; @@ -32,7 +34,7 @@ z-index: 1; & .mobile-wrapper__body { - overflow: overlay; + overflow: auto; } &--is-buy { diff --git a/src/components/BuySellForm/BuySellForm.tsx b/src/components/BuySellForm/BuySellForm.tsx index 8c63d89a..a251ef4a 100644 --- a/src/components/BuySellForm/BuySellForm.tsx +++ b/src/components/BuySellForm/BuySellForm.tsx @@ -132,6 +132,10 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp const history = useHistory(); const { isDesktop } = useDevice(); const isBuy = type === BUY_SELL.BUY; + const hasSelectedPaymentMethods = + isBuy && + ((paymentMethodNames && paymentMethodNames?.length > 0 && selectedPaymentMethods.length > 0) || + (!paymentMethodNames && selectedPaymentMethods.length < 1)); const shouldDisableField = !isBuy && @@ -265,7 +269,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp isBuy={isBuy} isHidden={isHidden} isModalOpen={isModalOpen} - isValid={isValid && ((isBuy && selectedPaymentMethods.length > 0) || !isBuy)} + isValid={isValid && (hasSelectedPaymentMethods || !isBuy)} onRequestClose={onCloseBuySellForm} onSubmit={onSubmit} > diff --git a/src/pages/advertiser/screens/Advertiser/Advertiser.scss b/src/pages/advertiser/screens/Advertiser/Advertiser.scss index cfad7dab..4dad6bf2 100644 --- a/src/pages/advertiser/screens/Advertiser/Advertiser.scss +++ b/src/pages/advertiser/screens/Advertiser/Advertiser.scss @@ -6,7 +6,7 @@ @include mobile-or-tablet-screen { top: 0; - overflow: overlay; + overflow: auto; height: calc(100vh - 4rem); width: 100%; } diff --git a/src/pages/orders/screens/OrderDetails/OrderDetails.scss b/src/pages/orders/screens/OrderDetails/OrderDetails.scss index b96e67f5..525148fa 100644 --- a/src/pages/orders/screens/OrderDetails/OrderDetails.scss +++ b/src/pages/orders/screens/OrderDetails/OrderDetails.scss @@ -3,8 +3,8 @@ height: calc(100vh - 27rem); @include mobile-or-tablet-screen { - position: absolute; - top: 0; + position: fixed; + top: 7.5rem; height: calc(100vh - 7rem); & .mobile-wrapper { From 4ba8f19483859798af49823d75637c34fe386f39 Mon Sep 17 00:00:00 2001 From: Farrah Mae Ochoa Date: Fri, 19 Jul 2024 15:04:00 +0400 Subject: [PATCH 03/10] fix: update versions --- package-lock.json | 21 ++++++---------- package.json | 6 ++--- src/assets/find-ad.svg | 1 - src/assets/pay-user.svg | 1 - src/assets/receive-payment.svg | 1 - src/assets/received-fund.svg | 1 - src/assets/release-fund.svg | 1 - src/assets/scam-advance-payment.svg | 1 - src/assets/scam-pot.svg | 1 - src/assets/scam-sms.svg | 1 - .../BlockedScenarios/BlockedScenarios.tsx | 2 +- .../components/GuideTooltip/GuideTooltip.tsx | 5 +++- .../guide/screens/Awareness/Awareness.tsx | 11 +++----- .../screens/GettingStarted/GettingStarted.tsx | 25 ++++++++++--------- .../screens/OrderDetails/OrderDetails.scss | 5 ++-- 15 files changed, 36 insertions(+), 47 deletions(-) delete mode 100644 src/assets/find-ad.svg delete mode 100644 src/assets/pay-user.svg delete mode 100644 src/assets/receive-payment.svg delete mode 100644 src/assets/received-fund.svg delete mode 100644 src/assets/release-fund.svg delete mode 100644 src/assets/scam-advance-payment.svg delete mode 100644 src/assets/scam-pot.svg delete mode 100644 src/assets/scam-sms.svg diff --git a/package-lock.json b/package-lock.json index 56417f38..b9805a9e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,11 +10,11 @@ "dependencies": { "@babel/preset-env": "^7.24.5", "@chakra-ui/react": "^2.8.2", - "@deriv-com/api-hooks": "^1.3.7", + "@deriv-com/api-hooks": "^1.4.0", "@deriv-com/translations": "^1.2.4", "@deriv-com/ui": "^1.29.0", "@deriv-com/utils": "^0.0.28", - "@deriv/quill-icons": "^1.22.10", + "@deriv/quill-icons": "^1.23.5", "@sendbird/chat": "^4.11.3", "@svgr/rollup": "^8.1.0", "@tanstack/react-query": "^5.28.14", @@ -3764,9 +3764,9 @@ } }, "node_modules/@deriv-com/api-hooks": { - "version": "1.3.7", - "resolved": "https://registry.npmjs.org/@deriv-com/api-hooks/-/api-hooks-1.3.7.tgz", - "integrity": "sha512-5XomMS9zOG3wSgEl5oA4N0gCr9pI/hRCIMgoUVP2D9fThTS6K9iHVv/aWieJKx0esF8lYQx5zaLDYTwxqX0u/g==", + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@deriv-com/api-hooks/-/api-hooks-1.4.0.tgz", + "integrity": "sha512-xUMpTA4t8Qnv8G9zwoJtOVClVPFuA8Yt1JKuwwI4ROdD2xi5P4d+HUp4D1Le5RziF57j2/ZXF3byVLXcte01zA==", "dependencies": { "@deriv-com/utils": "^0.0.28", "@deriv/api-types": "^1.0.985", @@ -3777,11 +3777,6 @@ "@rollup/rollup-linux-x64-gnu": "^4.18.0" } }, - "node_modules/@deriv-com/api-hooks/node_modules/@deriv-com/utils": { - "version": "0.0.28", - "resolved": "https://registry.npmjs.org/@deriv-com/utils/-/utils-0.0.28.tgz", - "integrity": "sha512-JJayPckG5ajwZjJ0H3VYe9GXcTpMY7oNOkMRiqwv14dtcsMTsYow9cVs3vfbiL4U59WGQBGMkkbh0EwSjYVrvQ==" - }, "node_modules/@deriv-com/eslint-config-deriv": { "version": "2.1.0-beta.3", "resolved": "https://registry.npmjs.org/@deriv-com/eslint-config-deriv/-/eslint-config-deriv-2.1.0-beta.3.tgz", @@ -3865,9 +3860,9 @@ } }, "node_modules/@deriv/quill-icons": { - "version": "1.22.10", - "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.22.10.tgz", - "integrity": "sha512-BtyMfKln7iBcTcERiaj3t8ADMplCOfE3J184Asaa/9RnE42e5JtehkYw78lwinYTBTzr1sL5tK0GRNlziFNRKw==", + "version": "1.23.5", + "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.23.5.tgz", + "integrity": "sha512-YYLINwk1sbErnCc8Qq2dcCTKDRAbs5efB/Xh5jIw5CF9e0SF7G+7YLKWpmmkcTh4Z/KCySzRePWJilYSAwngMw==", "peerDependencies": { "react": ">= 16", "react-dom": ">= 16" diff --git a/package.json b/package.json index bcd12d0f..65bd22ae 100644 --- a/package.json +++ b/package.json @@ -16,11 +16,11 @@ "dependencies": { "@babel/preset-env": "^7.24.5", "@chakra-ui/react": "^2.8.2", - "@deriv-com/api-hooks": "^1.3.7", + "@deriv-com/api-hooks": "^1.4.0", "@deriv-com/translations": "^1.2.4", "@deriv-com/ui": "^1.29.0", "@deriv-com/utils": "^0.0.28", - "@deriv/quill-icons": "^1.22.10", + "@deriv/quill-icons": "^1.23.5", "@sendbird/chat": "^4.11.3", "@svgr/rollup": "^8.1.0", "@tanstack/react-query": "^5.28.14", @@ -105,4 +105,4 @@ "vite-plugin-html-config": "^1.0.11", "vite-plugin-sass": "^0.1.0" } -} +} \ No newline at end of file diff --git a/src/assets/find-ad.svg b/src/assets/find-ad.svg deleted file mode 100644 index 4f462882..00000000 --- a/src/assets/find-ad.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/pay-user.svg b/src/assets/pay-user.svg deleted file mode 100644 index 4f6d3a1f..00000000 --- a/src/assets/pay-user.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/receive-payment.svg b/src/assets/receive-payment.svg deleted file mode 100644 index 682b6b77..00000000 --- a/src/assets/receive-payment.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/received-fund.svg b/src/assets/received-fund.svg deleted file mode 100644 index 4d40aa42..00000000 --- a/src/assets/received-fund.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/release-fund.svg b/src/assets/release-fund.svg deleted file mode 100644 index d96a6c0c..00000000 --- a/src/assets/release-fund.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/scam-advance-payment.svg b/src/assets/scam-advance-payment.svg deleted file mode 100644 index 479fb6c4..00000000 --- a/src/assets/scam-advance-payment.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/scam-pot.svg b/src/assets/scam-pot.svg deleted file mode 100644 index 2a17db37..00000000 --- a/src/assets/scam-pot.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/scam-sms.svg b/src/assets/scam-sms.svg deleted file mode 100644 index b19e4cf0..00000000 --- a/src/assets/scam-sms.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/BlockedScenarios/BlockedScenarios.tsx b/src/components/BlockedScenarios/BlockedScenarios.tsx index 0268336d..ae28339e 100644 --- a/src/components/BlockedScenarios/BlockedScenarios.tsx +++ b/src/components/BlockedScenarios/BlockedScenarios.tsx @@ -53,7 +53,7 @@ const BlockedScenarios = ({ type }: { type: string }) => { crypto: { actionButton: ( ), description: ( diff --git a/src/pages/guide/components/GuideTooltip/GuideTooltip.tsx b/src/pages/guide/components/GuideTooltip/GuideTooltip.tsx index 899b4dc6..4e051787 100644 --- a/src/pages/guide/components/GuideTooltip/GuideTooltip.tsx +++ b/src/pages/guide/components/GuideTooltip/GuideTooltip.tsx @@ -47,7 +47,10 @@ const GuideTooltip = () => { setIsGuideVisible(false)} + onClick={() => { + setIsGuideVisible(false); + LocalStorageUtils.setValue('should_show_p2p_guide', false); + }} /> diff --git a/src/pages/guide/screens/Awareness/Awareness.tsx b/src/pages/guide/screens/Awareness/Awareness.tsx index 7f48db19..2f2ad6ab 100644 --- a/src/pages/guide/screens/Awareness/Awareness.tsx +++ b/src/pages/guide/screens/Awareness/Awareness.tsx @@ -1,7 +1,4 @@ -//TODO: Replace these with Quill icons once ready -import { ReactComponent as ScamAdvancePaymentIcon } from '@/assets/scam-advance-payment.svg'; -import { ReactComponent as ScamPotIcon } from '@/assets/scam-pot.svg'; -import { ReactComponent as ScamSmsIcon } from '@/assets/scam-sms.svg'; +import { DerivDarkScamAdvancePaymentIcon, DerivDarkScamPotIcon, DerivDarkScamSmsIcon } from '@deriv/quill-icons'; import { Localize } from '@deriv-com/translations'; import { Text, useDevice } from '@deriv-com/ui'; import { Carousel } from '../../components'; @@ -23,7 +20,7 @@ const Awareness = () => { ), - icon: , + icon: , id: 0, title: ( @@ -38,7 +35,7 @@ const Awareness = () => { ), - icon: , + icon: , id: 1, title: ( @@ -65,7 +62,7 @@ const Awareness = () => { /> ), - icon: , + icon: , id: 2, title: ( diff --git a/src/pages/guide/screens/GettingStarted/GettingStarted.tsx b/src/pages/guide/screens/GettingStarted/GettingStarted.tsx index 1efb54f3..9ba0d25f 100644 --- a/src/pages/guide/screens/GettingStarted/GettingStarted.tsx +++ b/src/pages/guide/screens/GettingStarted/GettingStarted.tsx @@ -1,9 +1,10 @@ -//TODO: Replace these with Quill icons once ready -import { ReactComponent as FindAdIcon } from '@/assets/find-ad.svg'; -import { ReactComponent as PayUserIcon } from '@/assets/pay-user.svg'; -import { ReactComponent as ReceivePaymentIcon } from '@/assets/receive-payment.svg'; -import { ReactComponent as ReceivedFundIcon } from '@/assets/received-fund.svg'; -import { ReactComponent as ReleaseFundIcon } from '@/assets/release-fund.svg'; +import { + DerivDarkFindAdIcon, + DerivDarkPayUserIcon, + DerivDarkReceivedFundIcon, + DerivDarkReceivePaymentIcon, + DerivDarkReleaseFundIcon, +} from '@deriv/quill-icons'; import { Localize, useTranslations } from '@deriv-com/translations'; import { Tab, Tabs, Text } from '@deriv-com/ui'; import { Carousel } from '../../components'; @@ -23,7 +24,7 @@ const GettingStarted = () => { ), - icon: , + icon: , id: 0, title: ( @@ -37,7 +38,7 @@ const GettingStarted = () => { ), - icon: , + icon: , id: 1, title: ( @@ -63,7 +64,7 @@ const GettingStarted = () => { /> ), - icon: , + icon: , id: 2, title: ( @@ -84,7 +85,7 @@ const GettingStarted = () => { ), - icon: , + icon: , id: 0, title: ( @@ -98,7 +99,7 @@ const GettingStarted = () => { ), - icon: , + icon: , id: 1, title: ( @@ -112,7 +113,7 @@ const GettingStarted = () => { ), - icon: , + icon: , id: 2, title: ( diff --git a/src/pages/orders/screens/OrderDetails/OrderDetails.scss b/src/pages/orders/screens/OrderDetails/OrderDetails.scss index 525148fa..57bfa515 100644 --- a/src/pages/orders/screens/OrderDetails/OrderDetails.scss +++ b/src/pages/orders/screens/OrderDetails/OrderDetails.scss @@ -3,9 +3,10 @@ height: calc(100vh - 27rem); @include mobile-or-tablet-screen { - position: fixed; - top: 7.5rem; + position: absolute; + top: 0; height: calc(100vh - 7rem); + max-height: -webkit-fill-available; & .mobile-wrapper { &__header { From d80d55f2495bf067c6fda2d0d6752e75b123afd3 Mon Sep 17 00:00:00 2001 From: Farrah Mae Ochoa Date: Mon, 22 Jul 2024 15:49:50 +0400 Subject: [PATCH 04/10] fix: order issues --- .../FullPageMobileWrapper/FullPageMobileWrapper.scss | 4 ++-- src/main.scss | 3 +++ .../guide/components/GuideTooltip/GuideTooltip.tsx | 12 ++++-------- src/pages/my-ads/screens/MyAds/MyAds.tsx | 2 +- .../orders/screens/OrderDetails/OrderDetails.scss | 7 +++---- src/routes/AppContent/index.scss | 8 +++++++- 6 files changed, 20 insertions(+), 16 deletions(-) diff --git a/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss b/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss index bd6660df..3ebd6604 100644 --- a/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss +++ b/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss @@ -1,6 +1,6 @@ .mobile-wrapper { @include mobile-or-tablet-screen { - height: calc(100vh - 8rem); + height: calc(100% - 8rem); width: 100%; border-radius: 0; display: grid; @@ -38,6 +38,6 @@ } @include mobile { - height: calc(100vh - 7.5rem); + height: calc(100% - 7.5rem); } } diff --git a/src/main.scss b/src/main.scss index 31c7e0ef..d1181a7a 100644 --- a/src/main.scss +++ b/src/main.scss @@ -14,4 +14,7 @@ body { -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; + position: relative; + min-height: 100%; + height: 100%; } diff --git a/src/pages/guide/components/GuideTooltip/GuideTooltip.tsx b/src/pages/guide/components/GuideTooltip/GuideTooltip.tsx index 4e051787..65d62540 100644 --- a/src/pages/guide/components/GuideTooltip/GuideTooltip.tsx +++ b/src/pages/guide/components/GuideTooltip/GuideTooltip.tsx @@ -11,8 +11,8 @@ import './GuideTooltip.scss'; // TODO: replace this with deriv/ui const GuideTooltip = () => { const history = useHistory(); - const [isGuideVisible, setIsGuideVisible] = useState( - LocalStorageUtils.getValue('should_show_p2p_guide') ?? null + const [isGuideVisible, setIsGuideVisible] = useState( + LocalStorageUtils.getValue('should_show_p2p_guide') ?? true ); const onGetStarted = () => { @@ -21,11 +21,8 @@ const GuideTooltip = () => { }; useEffect(() => { - if (isGuideVisible === null) { - setIsGuideVisible(true); - LocalStorageUtils.setValue('should_show_p2p_guide', true); - } - }, [isGuideVisible]); + LocalStorageUtils.setValue('should_show_p2p_guide', false); + }, []); return isGuideVisible ? (
@@ -49,7 +46,6 @@ const GuideTooltip = () => { iconSize='sm' onClick={() => { setIsGuideVisible(false); - LocalStorageUtils.setValue('should_show_p2p_guide', false); }} />
diff --git a/src/pages/my-ads/screens/MyAds/MyAds.tsx b/src/pages/my-ads/screens/MyAds/MyAds.tsx index 95b4a811..398be0b0 100644 --- a/src/pages/my-ads/screens/MyAds/MyAds.tsx +++ b/src/pages/my-ads/screens/MyAds/MyAds.tsx @@ -13,7 +13,7 @@ const MyAds = () => { if (!isPoaVerified || !isPoiVerified) return ; return ( -
+
{isAdvertiserBarred && }
diff --git a/src/pages/orders/screens/OrderDetails/OrderDetails.scss b/src/pages/orders/screens/OrderDetails/OrderDetails.scss index 57bfa515..f8e7515f 100644 --- a/src/pages/orders/screens/OrderDetails/OrderDetails.scss +++ b/src/pages/orders/screens/OrderDetails/OrderDetails.scss @@ -1,12 +1,11 @@ .order-details { overflow: auto; - height: calc(100vh - 27rem); + height: calc(100% - 27rem); @include mobile-or-tablet-screen { position: absolute; top: 0; - height: calc(100vh - 7rem); - max-height: -webkit-fill-available; + height: calc(100% - 7rem); & .mobile-wrapper { &__header { @@ -14,7 +13,7 @@ } &__body { - overflow-y: scroll; + overflow-y: auto; } &__footer { diff --git a/src/routes/AppContent/index.scss b/src/routes/AppContent/index.scss index 51330d03..3855fe5b 100644 --- a/src/routes/AppContent/index.scss +++ b/src/routes/AppContent/index.scss @@ -1,4 +1,10 @@ +#root { + height: 100%; +} + .app-content { + height: 100%; + &__body { position: relative; overflow: hidden; @@ -14,7 +20,7 @@ @include mobile-or-tablet-screen { max-width: 60rem; - height: 100vh; + height: 100%; } } From 0538b316a1cb07727b6153aed3e87e093a2df3c7 Mon Sep 17 00:00:00 2001 From: Farrah Mae Ochoa Date: Mon, 22 Jul 2024 16:31:12 +0400 Subject: [PATCH 05/10] refactor: code --- src/components/BuySellForm/BuySellForm.tsx | 6 ++---- src/pages/buy-sell/screens/BuySell/BuySell.tsx | 2 +- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/BuySellForm/BuySellForm.tsx b/src/components/BuySellForm/BuySellForm.tsx index a251ef4a..ccd867dd 100644 --- a/src/components/BuySellForm/BuySellForm.tsx +++ b/src/components/BuySellForm/BuySellForm.tsx @@ -133,9 +133,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp const { isDesktop } = useDevice(); const isBuy = type === BUY_SELL.BUY; const hasSelectedPaymentMethods = - isBuy && - ((paymentMethodNames && paymentMethodNames?.length > 0 && selectedPaymentMethods.length > 0) || - (!paymentMethodNames && selectedPaymentMethods.length < 1)); + (!paymentMethodNames && selectedPaymentMethods.length < 1) || selectedPaymentMethods.length > 0; const shouldDisableField = !isBuy && @@ -269,7 +267,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp isBuy={isBuy} isHidden={isHidden} isModalOpen={isModalOpen} - isValid={isValid && (hasSelectedPaymentMethods || !isBuy)} + isValid={isValid && (!isBuy || hasSelectedPaymentMethods)} onRequestClose={onCloseBuySellForm} onSubmit={onSubmit} > diff --git a/src/pages/buy-sell/screens/BuySell/BuySell.tsx b/src/pages/buy-sell/screens/BuySell/BuySell.tsx index fec79022..83e9c397 100644 --- a/src/pages/buy-sell/screens/BuySell/BuySell.tsx +++ b/src/pages/buy-sell/screens/BuySell/BuySell.tsx @@ -26,7 +26,7 @@ const BuySell = () => { } return ( -
+
{isAdvertiserBarred && }
From 5744f326421f0989eecd4a97cbe1092a635e7a9e Mon Sep 17 00:00:00 2001 From: Farrah Mae Ochoa Date: Tue, 23 Jul 2024 08:06:53 +0400 Subject: [PATCH 06/10] fix: alignment issues in mobile --- src/components/BuySellForm/BuySellForm.scss | 8 ++++---- .../BuySellForm/BuySellFormDisplayWrapper.tsx | 2 +- .../BuySellFormFooter/BuySellFormFooter.tsx | 2 +- .../FullPageMobileWrapper/FullPageMobileWrapper.scss | 4 ++++ src/components/Table/Table.tsx | 2 +- .../buy-sell/screens/BuySellTable/BuySellTable.scss | 1 + .../AdConditionsSection/AdCondtionsSection.scss | 2 +- .../components/AdFormController/AdFormController.scss | 10 ---------- .../my-ads/components/AdTypeSection/AdTypeSection.scss | 3 ++- src/pages/my-ads/screens/MyAds/MyAds.tsx | 5 +---- src/pages/orders/screens/OrderDetails/OrderDetails.tsx | 1 + 11 files changed, 17 insertions(+), 23 deletions(-) diff --git a/src/components/BuySellForm/BuySellForm.scss b/src/components/BuySellForm/BuySellForm.scss index 706226e8..30f6b684 100644 --- a/src/components/BuySellForm/BuySellForm.scss +++ b/src/components/BuySellForm/BuySellForm.scss @@ -7,6 +7,10 @@ width: 100vw; height: 100vh; box-shadow: none; + + &__footer { + border-top: 2px solid #f2f3f4; + } } & .deriv-modal__body { @@ -33,10 +37,6 @@ left: 0; z-index: 1; - & .mobile-wrapper__body { - overflow: auto; - } - &--is-buy { top: -4rem; } diff --git a/src/components/BuySellForm/BuySellFormDisplayWrapper.tsx b/src/components/BuySellForm/BuySellFormDisplayWrapper.tsx index 62dd7086..dc7b3f11 100644 --- a/src/components/BuySellForm/BuySellFormDisplayWrapper.tsx +++ b/src/components/BuySellForm/BuySellFormDisplayWrapper.tsx @@ -35,10 +35,10 @@ const BuySellFormDisplayWrapper = ({ 'buy-sell-form__full-page-modal--is-buy': currentRoute === 'buy-sell', })} onBack={onRequestClose} - renderFooter={() => } renderHeader={() => } > {children} + ); } diff --git a/src/components/BuySellForm/BuySellFormFooter/BuySellFormFooter.tsx b/src/components/BuySellForm/BuySellFormFooter/BuySellFormFooter.tsx index fd20ddf2..58afc329 100644 --- a/src/components/BuySellForm/BuySellFormFooter/BuySellFormFooter.tsx +++ b/src/components/BuySellForm/BuySellFormFooter/BuySellFormFooter.tsx @@ -9,7 +9,7 @@ type TBuySellFormFooterProps = { const BuySellFormFooter = ({ isDisabled, onClickCancel, onSubmit }: TBuySellFormFooterProps) => { const { isDesktop } = useDevice(); return ( -
+
)} + shouldFixedFooter={false} > {shouldShowLostFundsBanner && ( Date: Tue, 23 Jul 2024 08:53:49 +0400 Subject: [PATCH 07/10] fix: footer --- .../BuySellForm/BuySellFormFooter/BuySellFormFooter.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BuySellForm/BuySellFormFooter/BuySellFormFooter.tsx b/src/components/BuySellForm/BuySellFormFooter/BuySellFormFooter.tsx index 58afc329..77065191 100644 --- a/src/components/BuySellForm/BuySellFormFooter/BuySellFormFooter.tsx +++ b/src/components/BuySellForm/BuySellFormFooter/BuySellFormFooter.tsx @@ -9,7 +9,7 @@ type TBuySellFormFooterProps = { const BuySellFormFooter = ({ isDisabled, onClickCancel, onSubmit }: TBuySellFormFooterProps) => { const { isDesktop } = useDevice(); return ( -
+