diff --git a/packages/p2p-v2/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx b/packages/p2p-v2/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx index 34178a33c619..4070f13d2832 100644 --- a/packages/p2p-v2/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx +++ b/packages/p2p-v2/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx @@ -1,7 +1,8 @@ import React, { useEffect, useState } from 'react'; import { Controller, useForm } from 'react-hook-form'; +import { LightDivider } from '@/components'; import { floatingPointValidator } from '@/utils'; -import { Divider, Input, Text, useDevice } from '@deriv-com/ui'; +import { Input, Text, useDevice } from '@deriv-com/ui'; import { FormatUtils } from '@deriv-com/utils'; import './BuySellAmount.scss'; @@ -42,7 +43,7 @@ const BuySellAmount = ({ return (
- + {`Enter ${isBuy ? 'sell' : 'buy'} amount`}
@@ -93,10 +94,10 @@ const BuySellAmount = ({ required: 'Enter a valid amount', }} /> - {isMobile && } + {isMobile && }
{`You'll ${isBuy ? 'receive' : 'send'}`} - + {buySellAmount} {localCurrency}
diff --git a/packages/p2p-v2/src/components/BuySellForm/BuySellForm.scss b/packages/p2p-v2/src/components/BuySellForm/BuySellForm.scss index b8b5395d9433..caea15a0dad1 100644 --- a/packages/p2p-v2/src/components/BuySellForm/BuySellForm.scss +++ b/packages/p2p-v2/src/components/BuySellForm/BuySellForm.scss @@ -27,7 +27,6 @@ position: absolute; top: -4rem; left: 0; - background: #fff; z-index: 1; height: calc(100vh - 8rem); diff --git a/packages/p2p-v2/src/components/BuySellForm/BuySellForm.tsx b/packages/p2p-v2/src/components/BuySellForm/BuySellForm.tsx index 73e1aec35cfc..7c31ca25c353 100644 --- a/packages/p2p-v2/src/components/BuySellForm/BuySellForm.tsx +++ b/packages/p2p-v2/src/components/BuySellForm/BuySellForm.tsx @@ -12,7 +12,8 @@ import { setDecimalPlaces, } from '@/utils'; import { p2p } from '@deriv/api-v2'; -import { Divider, InlineMessage, Text, TextArea, useDevice } from '@deriv-com/ui'; +import { InlineMessage, Text, TextArea, useDevice } from '@deriv-com/ui'; +import { LightDivider } from '../LightDivider'; import { BuySellAmount } from './BuySellAmount'; import { BuySellData } from './BuySellData'; import BuySellFormDisplayWrapper from './BuySellFormDisplayWrapper'; @@ -184,7 +185,7 @@ const BuySellForm = ({ paymentMethods={paymentMethods} rate={displayEffectiveRate} /> - + {isBuy && payment_method_names?.length > 0 && ( - + ( - - {`${isBuy ? 'Sell' : 'Buy'} ${currency}`} - -); + +const BuySellFormHeader = ({ currency = '', isBuy }: TBuySellFormHeaderProps) => { + const { isMobile } = useDevice(); + + return ( + + {`${isBuy ? 'Sell' : 'Buy'} ${currency}`} + + ); +}; export default BuySellFormHeader; diff --git a/packages/p2p-v2/src/components/BuySellForm/BuySellFormHeader/__tests__/BuySellFormHeader.spec.tsx b/packages/p2p-v2/src/components/BuySellForm/BuySellFormHeader/__tests__/BuySellFormHeader.spec.tsx index f1a6394a3aea..bd6f3b657998 100644 --- a/packages/p2p-v2/src/components/BuySellForm/BuySellFormHeader/__tests__/BuySellFormHeader.spec.tsx +++ b/packages/p2p-v2/src/components/BuySellForm/BuySellFormHeader/__tests__/BuySellFormHeader.spec.tsx @@ -7,6 +7,11 @@ const mockProps = { isBuy: true, }; +jest.mock('@deriv-com/ui', () => ({ + ...jest.requireActual('@deriv-com/ui'), + useDevice: () => ({ isMobile: false }), +})); + describe('BuySellFormHeader', () => { it('should render the header as expected', () => { render(); diff --git a/packages/p2p-v2/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx b/packages/p2p-v2/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx index 1be54b68725b..80b20e82f0d5 100644 --- a/packages/p2p-v2/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx +++ b/packages/p2p-v2/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { TPaymentMethod } from 'types'; +import { LightDivider } from '@/components'; import { sortPaymentMethodsWithAvailability } from '@/utils'; -import { Divider, Text, useDevice } from '@deriv-com/ui'; +import { Text, useDevice } from '@deriv-com/ui'; import { PaymentMethodCard } from '../../PaymentMethodCard'; type TBuySellPaymentSectionProps = { @@ -70,7 +71,7 @@ const BuySellPaymentSection = ({ ))}
- + ); }; diff --git a/packages/p2p-v2/src/components/Clipboard/Clipboard.scss b/packages/p2p-v2/src/components/Clipboard/Clipboard.scss index 3e45e841f528..64f7cbed48e8 100644 --- a/packages/p2p-v2/src/components/Clipboard/Clipboard.scss +++ b/packages/p2p-v2/src/components/Clipboard/Clipboard.scss @@ -6,6 +6,6 @@ align-items: center; justify-content: center; cursor: pointer; - height: 4.8rem; - width: 3.8rem; + height: 3.8rem; + width: 3.2rem; } diff --git a/packages/p2p-v2/src/components/Clipboard/Clipboard.tsx b/packages/p2p-v2/src/components/Clipboard/Clipboard.tsx index a5a898204508..d8271b4aa996 100644 --- a/packages/p2p-v2/src/components/Clipboard/Clipboard.tsx +++ b/packages/p2p-v2/src/components/Clipboard/Clipboard.tsx @@ -33,7 +33,7 @@ const Clipboard = ({ textCopy }: TClipboardProps) => { }, []); return ( - + diff --git a/packages/p2p-v2/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss b/packages/p2p-v2/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss index 8764a7cdeafc..0c2d83a1dcff 100644 --- a/packages/p2p-v2/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss +++ b/packages/p2p-v2/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss @@ -5,6 +5,7 @@ border-radius: 0; display: grid; grid-template-rows: 6rem auto; + background-color: #fff; &--fixed-footer { grid-template-rows: 6rem auto 8rem; diff --git a/packages/p2p-v2/src/components/LightDivider/LightDivider.tsx b/packages/p2p-v2/src/components/LightDivider/LightDivider.tsx new file mode 100644 index 000000000000..90f1eefc78a3 --- /dev/null +++ b/packages/p2p-v2/src/components/LightDivider/LightDivider.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { Divider } from '@deriv-com/ui'; + +type TLightDividerProps = { + className?: string; + height?: string; + margin?: string; +}; + +const LightDivider = ({ className, height, margin }: TLightDividerProps) => { + return ; +}; + +export default LightDivider; diff --git a/packages/p2p-v2/src/components/LightDivider/index.ts b/packages/p2p-v2/src/components/LightDivider/index.ts new file mode 100644 index 000000000000..295da5ffebed --- /dev/null +++ b/packages/p2p-v2/src/components/LightDivider/index.ts @@ -0,0 +1 @@ +export { default as LightDivider } from './LightDivider'; diff --git a/packages/p2p-v2/src/components/MobileTabs/MobileTabs.scss b/packages/p2p-v2/src/components/MobileTabs/MobileTabs.scss index fc802bd25688..e08e31e57341 100644 --- a/packages/p2p-v2/src/components/MobileTabs/MobileTabs.scss +++ b/packages/p2p-v2/src/components/MobileTabs/MobileTabs.scss @@ -2,12 +2,13 @@ display: flex; flex-direction: column; - .derivs-button { - padding: 2.3rem 1.6rem; + &__tab { + padding: 3rem 1.6rem; display: flex; justify-content: space-between; - border-bottom: 0.1rem solid #e6e9e9; + border-bottom: 0.1rem solid #f2f3f4; flex-direction: row-reverse; + border-radius: unset; &:last-child { border-bottom: none; diff --git a/packages/p2p-v2/src/components/MobileTabs/MobileTabs.tsx b/packages/p2p-v2/src/components/MobileTabs/MobileTabs.tsx index 405cc09be13a..b7fecf0cea13 100644 --- a/packages/p2p-v2/src/components/MobileTabs/MobileTabs.tsx +++ b/packages/p2p-v2/src/components/MobileTabs/MobileTabs.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { LabelPairedChevronRightLgBoldIcon } from '@deriv/quill-icons'; -import { Button } from '@deriv-com/ui'; +import { LabelPairedChevronRightSmRegularIcon } from '@deriv/quill-icons'; +import { Button, Text } from '@deriv-com/ui'; import './MobileTabs.scss'; type TMobileTabsProps = { @@ -15,12 +15,12 @@ function MobileTabs({ onChangeTab, tabs }: TMobileTabsProps< ))} diff --git a/packages/p2p-v2/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx b/packages/p2p-v2/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx index c1e273082d15..f083430a39a9 100644 --- a/packages/p2p-v2/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx +++ b/packages/p2p-v2/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx @@ -59,7 +59,14 @@ const BlockUnblockUserModal = ({ {getModalContent()}
-
); diff --git a/packages/p2p-v2/src/components/Modals/MyAdsDeleteModal/MyAdsDeleteModal.scss b/packages/p2p-v2/src/components/Modals/MyAdsDeleteModal/MyAdsDeleteModal.scss index 3a1cbacc54d6..7298e023a693 100644 --- a/packages/p2p-v2/src/components/Modals/MyAdsDeleteModal/MyAdsDeleteModal.scss +++ b/packages/p2p-v2/src/components/Modals/MyAdsDeleteModal/MyAdsDeleteModal.scss @@ -1,20 +1,28 @@ .p2p-v2-my-ads-delete-modal { - @include p2p-v2-modal-styles; + height: auto; width: 44rem; + border-radius: 8px; + @include mobile { width: 32.8rem; } + &__header { - margin: 0 0.8rem; - padding-bottom: 1.2rem; @include mobile { - margin: 0; + padding: 0 1.6rem; } } + &__body { - margin: 2.4rem 0.8rem; + padding: 1rem 2.4rem; @include mobile { - margin: 0; + padding: 0 1.6rem; + } + } + + &__footer { + @include mobile { + padding: 1.6rem; } } } diff --git a/packages/p2p-v2/src/components/Modals/MyAdsDeleteModal/MyAdsDeleteModal.tsx b/packages/p2p-v2/src/components/Modals/MyAdsDeleteModal/MyAdsDeleteModal.tsx index 7a3379066b01..5a0316d7cbe6 100644 --- a/packages/p2p-v2/src/components/Modals/MyAdsDeleteModal/MyAdsDeleteModal.tsx +++ b/packages/p2p-v2/src/components/Modals/MyAdsDeleteModal/MyAdsDeleteModal.tsx @@ -1,9 +1,7 @@ -import React, { memo, useEffect } from 'react'; -import Modal from 'react-modal'; +import React, { memo } from 'react'; import { useDevice } from '@/hooks'; import { p2p } from '@deriv/api-v2'; -import { Button, Text } from '@deriv-com/ui'; -import { customStyles } from '../helpers'; +import { Button, Modal, Text } from '@deriv-com/ui'; import './MyAdsDeleteModal.scss'; type TMyAdsDeleteModalProps = { @@ -21,10 +19,6 @@ const MyAdsDeleteModal = ({ error, id, isModalOpen, onClickDelete, onRequestClos const hasActiveOrders = advertInfo?.active_orders && advertInfo?.active_orders > 0; - useEffect(() => { - Modal.setAppElement('#v2_modal_root'); - }, []); - const getModalText = () => { if (hasActiveOrders && !error) { return 'You have open orders for this ad. Complete all open orders before deleting this ad.'; @@ -37,17 +31,22 @@ const MyAdsDeleteModal = ({ error, id, isModalOpen, onClickDelete, onRequestClos const getModalFooter = () => { if (hasActiveOrders || error) { return ( -
- -
+ ); } return ( -
- -
- - + + {title} + + + {errorMessage} + + + + + ); }; diff --git a/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/__tests__/PaymentMethodErrorModal.spec.tsx b/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/__tests__/PaymentMethodErrorModal.spec.tsx index 7604a3fe51f6..7ece6e216a5d 100644 --- a/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/__tests__/PaymentMethodErrorModal.spec.tsx +++ b/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/__tests__/PaymentMethodErrorModal.spec.tsx @@ -4,6 +4,11 @@ import PaymentMethodErrorModal from '../PaymentMethodErrorModal'; const wrapper = ({ children }: PropsWithChildren) =>
{children}
; +jest.mock('@deriv-com/ui', () => ({ + ...jest.requireActual('@deriv-com/ui'), + useDevice: jest.fn(() => ({ isMobile: false })), +})); + describe('PaymentMethodErrorModal', () => { it('should render the modal correctly', () => { const props = { diff --git a/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.scss b/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.scss new file mode 100644 index 000000000000..e57064f7f26e --- /dev/null +++ b/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.scss @@ -0,0 +1,37 @@ +.p2p-v2-payment-method-modal { + height: auto; + border-radius: 8px; + width: 44rem; + + @include mobile { + max-width: calc(100vw - 3.2rem); + } + + &__header { + margin-top: 0.5rem; + + @include mobile { + margin-top: 0; + padding: 1.6rem; + } + } + + &__body { + padding: 1rem 2.4rem; + + @include mobile { + padding: 0.5rem 1.6rem; + } + } + + &__footer { + display: flex; + justify-content: flex-end; + gap: 0.8rem; + width: 100%; + + @include mobile { + padding: 1.6rem; + } + } +} diff --git a/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.tsx b/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.tsx index ee211b9a55a5..1b32ae3a8033 100644 --- a/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.tsx +++ b/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.tsx @@ -1,8 +1,6 @@ -import React, { useEffect } from 'react'; -import ReactModal from 'react-modal'; -import { Button, Text } from '@deriv-com/ui'; -import { customStyles } from '../../helpers'; -import '../styles.scss'; +import React from 'react'; +import { Button, Modal, Text, useDevice } from '@deriv-com/ui'; +import './PaymentMethodModal.scss'; type TPaymentMethodModalProps = { description?: string; @@ -23,47 +21,50 @@ const PaymentMethodModal = ({ secondaryButtonLabel, title, }: TPaymentMethodModalProps) => { - useEffect(() => { - ReactModal.setAppElement('#v2_modal_root'); - }, []); + const { isMobile } = useDevice(); + const buttonTextSize = isMobile ? 'md' : 'sm'; + // TODO: Remember to translate these strings return ( - -
- - {title} - - {description} -
- - -
-
- + + {title} + + + {description} + + + + + + ); }; diff --git a/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/__tests__/PaymentMethodModal.spec.tsx b/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/__tests__/PaymentMethodModal.spec.tsx index 5d11215dec3b..5f954b6e9e46 100644 --- a/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/__tests__/PaymentMethodModal.spec.tsx +++ b/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/__tests__/PaymentMethodModal.spec.tsx @@ -5,6 +5,11 @@ import PaymentMethodModal from '../PaymentMethodModal'; const wrapper = ({ children }: PropsWithChildren) =>
{children}
; +jest.mock('@deriv-com/ui', () => ({ + ...jest.requireActual('@deriv-com/ui'), + useDevice: jest.fn(() => ({ isMobile: false })), +})); + describe('PaymentMethodModal', () => { it('should render the component correctly', () => { render( diff --git a/packages/p2p-v2/src/components/Modals/PaymentMethods/styles.scss b/packages/p2p-v2/src/components/Modals/PaymentMethods/styles.scss deleted file mode 100644 index cd0128b0b276..000000000000 --- a/packages/p2p-v2/src/components/Modals/PaymentMethods/styles.scss +++ /dev/null @@ -1,40 +0,0 @@ -.p2p-v2-payment-method-modal { - &__modal { - position: absolute; - top: 50%; - left: 50%; - right: auto; - bottom: auto; - margin-right: -50%; - transform: translate(-50%, -50%); - padding: 2.4rem; - border-radius: 8px; - background: #fff; - box-shadow: 0px 32px 64px 0px rgba(14, 14, 14, 0.14); - } - &__wrapper { - display: flex; - flex-direction: column; - justify-content: flex-start; - gap: 2.4rem; - width: 44rem; - @include mobile { - width: 100%; - } - } - &__buttons { - display: flex; - flex-direction: row; - justify-content: flex-end; - gap: 1.6rem; - width: 100%; - &--cancel { - background: transparent; - border: 2px solid #999999; - - &:active:not([disabled]) { - border: 1px solid #999999; - } - } - } -} diff --git a/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsModal.scss b/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsModal.scss index ccc9400986a0..b41534768064 100644 --- a/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsModal.scss +++ b/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsModal.scss @@ -1,10 +1,18 @@ .p2p-v2-share-ads-modal { + padding: 2.4rem; + display: flex; + flex-direction: column; + height: auto; width: 72rem; + border-radius: 8px; + @include mobile { + padding: 1.6rem; width: 32.8rem; } &__container { + display: flex; margin-top: 2.4rem; @include mobile { @@ -14,6 +22,8 @@ } &__card { + display: flex; + flex-direction: column; width: 48%; @include mobile { @@ -23,6 +33,12 @@ } &__button { + display: flex; + align-items: center; + gap: 1rem; + border-width: 1px; + width: 100%; + & .deriv-text { display: flex; align-items: center; @@ -33,12 +49,17 @@ } &__copy { + display: flex; + align-items: center; border-radius: 0.3rem; border: 0.1em solid var(--general-active); margin-top: 2.5rem; padding: 0.8rem; &-clipboard { + display: flex; + align-items: center; + justify-content: center; background: var(--general-section-5); border-radius: 0.3rem; margin-left: 1rem; diff --git a/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsModal.tsx b/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsModal.tsx index a296bd62e4a5..866134f5b28d 100644 --- a/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsModal.tsx +++ b/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsModal.tsx @@ -1,18 +1,14 @@ -/* eslint-disable camelcase */ import React, { memo, MouseEvent, useEffect, useRef } from 'react'; -import clsx from 'clsx'; import html2canvas from 'html2canvas'; -import Modal from 'react-modal'; import { Clipboard } from '@/components'; import { BUY_SELL, RATE_TYPE } from '@/constants'; import { useCopyToClipboard } from '@/hooks'; import { p2p } from '@deriv/api-v2'; -import { Button, Divider, Text, useDevice } from '@deriv-com/ui'; +import { Button, Divider, Modal, Text, useDevice } from '@deriv-com/ui'; //TODO: replace below icons with the one from quill once available import CheckmarkCircle from '../../../public/ic-checkmark-circle.svg'; import ShareIcon from '../../../public/ic-share.svg'; import ShareLinkIcon from '../../../public/ic-share-link.svg'; -import { customStyles } from '../helpers'; import ShareMyAdsCard from './ShareAdsCard'; import ShareMyAdsSocials from './ShareAdsSocials'; import './ShareAdsModal.scss'; @@ -27,23 +23,26 @@ const websiteUrl = () => `${location.protocol}//${location.hostname}/`; const ShareAdsModal = ({ id, isModalOpen, onRequestClose }: TShareAdsModalProps) => { const timeoutClipboardRef = useRef | null>(null); - const { isMobile } = useDevice(); + const { isDesktop, isMobile } = useDevice(); const { data: advertInfo, isLoading: isLoadingInfo } = p2p.advert.useGet({ id }); const [isCopied, copyToClipboard, setIsCopied] = useCopyToClipboard(); - const { account_currency, advertiser_details, local_currency, rate_display, rate_type, type } = advertInfo ?? {}; - const { id: advertiserId } = advertiser_details ?? {}; + const { + account_currency: accountCurrency, + advertiser_details: advertiserDetails, + local_currency: localCurrency, + rate_display: rateDisplay, + rate_type: rateType, + type, + } = advertInfo ?? {}; + const { id: advertiserId } = advertiserDetails ?? {}; const divRef = useRef(null); const advertUrl = `${websiteUrl()}cashier/p2p/advertiser?id=${advertiserId}&advert_id=${id}`; const isBuyAd = type === BUY_SELL.BUY; - const firstCurrency = isBuyAd ? local_currency : account_currency; - const secondCurrency = isBuyAd ? account_currency : local_currency; - const adRateType = rate_type === RATE_TYPE.FLOAT ? '%' : ` ${local_currency}`; - const customMessage = `Hi! I'd like to exchange ${firstCurrency} for ${secondCurrency} at ${rate_display}${adRateType} on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n\n${advertUrl} \n\nThanks!`; - - useEffect(() => { - Modal.setAppElement('#v2_modal_root'); - }, []); + const firstCurrency = isBuyAd ? localCurrency : accountCurrency; + const secondCurrency = isBuyAd ? accountCurrency : localCurrency; + const adRateType = rateType === RATE_TYPE.FLOAT ? '%' : ` ${localCurrency}`; + const customMessage = `Hi! I'd like to exchange ${firstCurrency} for ${secondCurrency} at ${rateDisplay}${adRateType} on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n\n${advertUrl} \n\nThanks!`; const onCopy = (event: MouseEvent) => { copyToClipboard(advertUrl); @@ -87,66 +86,78 @@ const ShareAdsModal = ({ id, isModalOpen, onRequestClose }: TShareAdsModalProps) <> {!isLoadingInfo && ( - Share this ad - {!isMobile && Promote your ad by sharing the QR code and link.} -
-
- - - {isMobile && ( -
- - + + Share this ad + + + {isDesktop && Promote your ad by sharing the QR code and link.} +
+
+ + + {isMobile && ( +
+ + +
+ )} +
+ {isDesktop && ( +
+ Share via + + + Or copy this link +
+ + {advertUrl} + + {/* TODO: clipboard to be replaced */} +
+ +
+
)}
- {!isMobile && ( -
- Share via - - - Or copy this link -
- - {advertUrl} - - {/* TODO: clipboard to be replaced */} -
- -
-
-
- )} -
+ )} diff --git a/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsSocials.scss b/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsSocials.scss index f54bee4ffce9..67482d75b866 100644 --- a/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsSocials.scss +++ b/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsSocials.scss @@ -1,4 +1,6 @@ .p2p-v2-share-ads-socials { + display: flex; + justify-content: space-around; margin: 2.5rem 0; @include mobile { @@ -13,6 +15,9 @@ } &__circle { + display: flex; + align-items: center; + justify-content: center; height: 4.8rem; width: 4.8rem; background-color: #f2f3f4; diff --git a/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsSocials.tsx b/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsSocials.tsx index 401be8b95751..253d77682959 100644 --- a/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsSocials.tsx +++ b/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsSocials.tsx @@ -54,9 +54,10 @@ const getShareButtons = (advertUrl: string) => [ }, ]; const ShareMyAdsSocials = ({ advertUrl, customMessage }: TShareMyAdsSocialsProps) => ( -
+
{getShareButtons(advertUrl).map(({ ShareButton, href, icon, messagePropName, rel, target, text }) => ( -
{icon}
+
{icon}
{text} ))} diff --git a/packages/p2p-v2/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx b/packages/p2p-v2/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx index 0f5da1d0b4b5..5711fc8f7471 100644 --- a/packages/p2p-v2/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx +++ b/packages/p2p-v2/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx @@ -1,6 +1,5 @@ import React from 'react'; import html2canvas from 'html2canvas'; -import Modal from 'react-modal'; import { useDevice } from '@deriv-com/ui'; import { act, render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; @@ -48,6 +47,7 @@ jest.mock('html2canvas', () => ({ jest.mock('@deriv-com/ui', () => ({ ...jest.requireActual('@deriv-com/ui'), useDevice: jest.fn().mockReturnValue({ + isDesktop: true, isMobile: false, }), })); @@ -65,7 +65,6 @@ describe('ShareAdsModal', () => { element = document.createElement('div'); element.setAttribute('id', 'v2_modal_root'); document.body.appendChild(element); - Modal.setAppElement('#v2_modal_root'); }); afterAll(() => { document.body.removeChild(element); @@ -77,6 +76,7 @@ describe('ShareAdsModal', () => { }); it('should handle onclick when clicking on Share link', () => { mockUseDevice.mockReturnValue({ + isDesktop: false, isMobile: true, }); const mockShare = jest.fn().mockResolvedValue(true); diff --git a/packages/p2p-v2/src/components/PageReturn/PageReturn.scss b/packages/p2p-v2/src/components/PageReturn/PageReturn.scss index 98f0e18ec076..78918b521694 100644 --- a/packages/p2p-v2/src/components/PageReturn/PageReturn.scss +++ b/packages/p2p-v2/src/components/PageReturn/PageReturn.scss @@ -3,6 +3,7 @@ justify-content: space-between; margin: 2.4rem 0; width: 100%; + background: #fff; @include mobile { margin: 0; diff --git a/packages/p2p-v2/src/components/PageReturn/PageReturn.tsx b/packages/p2p-v2/src/components/PageReturn/PageReturn.tsx index 4d71ef5bd8d3..dd21391c871e 100644 --- a/packages/p2p-v2/src/components/PageReturn/PageReturn.tsx +++ b/packages/p2p-v2/src/components/PageReturn/PageReturn.tsx @@ -1,5 +1,6 @@ import React from 'react'; import clsx from 'clsx'; +import { TGenericSizes } from '@/utils'; import { LabelPairedArrowLeftLgBoldIcon } from '@deriv/quill-icons'; import { Text } from '@deriv-com/ui'; import './PageReturn.scss'; @@ -11,6 +12,7 @@ type TPageReturnProps = { pageTitle: string; rightPlaceHolder?: JSX.Element; shouldHideBackButton?: boolean; + size?: TGenericSizes; weight?: string; }; @@ -21,6 +23,7 @@ const PageReturn = ({ pageTitle, rightPlaceHolder, shouldHideBackButton = false, + size = 'md', weight = 'normal', }: TPageReturnProps) => { return ( @@ -31,7 +34,9 @@ const PageReturn = ({ data-testid='dt_p2p_v2_page_return_btn' onClick={onClick} /> - {pageTitle} + + {pageTitle} +
{rightPlaceHolder}
diff --git a/packages/p2p-v2/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx b/packages/p2p-v2/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx index 9fddcdc7ce76..a7f6af56874b 100644 --- a/packages/p2p-v2/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx +++ b/packages/p2p-v2/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx @@ -60,7 +60,7 @@ const PaymentMethodCardHeader = ({ {isEditable && ( } + renderIcon={() => } /> )} {isSelectable && ( diff --git a/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodForm.scss b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodForm.scss index d49c98b12baf..9b11b7830c48 100644 --- a/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodForm.scss +++ b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodForm.scss @@ -1,16 +1,30 @@ .p2p-v2-payment-method-form { max-width: 100%; min-width: 67.2rem; + padding-bottom: 2.4rem; @include mobile { width: 100%; min-width: 36rem; - padding: 1.6rem; + position: absolute; + top: 4rem; } &__button { display: inline-block; margin-left: 0.5rem; + padding: 0; + + // TODO: remove this once hover styles can be removed from the button component + &:hover { + // stylelint-disable-next-line declaration-no-important + background-color: transparent !important; + + & > span { + // stylelint-disable-next-line declaration-no-important + color: #ff444f !important; + } + } } .derivs-button__variant--ghost:hover:not(:disabled) { background: transparent; @@ -34,18 +48,31 @@ width: 100%; font-size: 1.4rem; } + &__form { - padding: 1.4rem 0; display: flex; flex-direction: column; width: 100%; + + @include mobile { + overflow: auto; + height: calc(100vh - 14rem); + padding-bottom: 8rem; + } } + .deriv-input--right-content { display: flex; align-items: center; height: 100%; top: 0; } + + .p2p-v2-textfield__message-container { + padding: 0; + height: 0; + } + &__icon--close { cursor: pointer; color: #ffffff; @@ -57,6 +84,10 @@ &-wrapper { width: 100%; padding: 1rem 0; + + @include mobile { + padding: 1.4rem 1.6rem; + } } } &__text { diff --git a/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodForm.tsx b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodForm.tsx index 437c6123d932..9104f992ccd8 100644 --- a/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodForm.tsx +++ b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodForm.tsx @@ -1,12 +1,12 @@ import React, { useEffect, useMemo, useState } from 'react'; import { useForm } from 'react-hook-form'; import { TSelectedPaymentMethod } from 'types'; -import { Dropdown, PaymentMethodField, PaymentMethodsFormFooter, PaymentMethodsHeader } from '@/components'; -import { PaymentMethodErrorModal, PaymentMethodModal } from '@/components/Modals'; +import { PageReturn, PaymentMethodField, PaymentMethodsFormFooter } from '@/components'; import { TFormState } from '@/reducers/types'; import { p2p } from '@deriv/api-v2'; -import { Button, Input, Text } from '@deriv-com/ui'; -import CloseCircle from '../../public/ic-close-circle.svg'; +import { useDevice } from '@deriv-com/ui'; +import { PaymentMethodFormAutocomplete } from './PaymentMethodFormAutocomplete'; +import { PaymentMethodFormModalRenderer } from './PaymentMethodFormModalRenderer'; import './PaymentMethodForm.scss'; type TPaymentMethodFormProps = { @@ -34,6 +34,8 @@ const PaymentMethodForm = ({ onAdd, onResetFormState, ...rest }: TPaymentMethodF const { create, error: createError, isSuccess: isCreateSuccessful } = p2p.advertiserPaymentMethods.useCreate(); const { error: updateError, isSuccess: isUpdateSuccessful, update } = p2p.advertiserPaymentMethods.useUpdate(); + const { isMobile } = useDevice(); + useEffect(() => { if (isCreateSuccessful) { onResetFormState(); @@ -63,7 +65,14 @@ const PaymentMethodForm = ({ onAdd, onResetFormState, ...rest }: TPaymentMethodF return (
- +
{ @@ -78,137 +87,51 @@ const PaymentMethodForm = ({ onAdd, onResetFormState, ...rest }: TPaymentMethodF } })} > -
- {selectedPaymentMethod ? ( - // TODO: Remember to translate this - { - onAdd(); - reset(); - }} - width={15.7} - /> - ) - } +
+
+ - ) : ( - <> - { - const selectedPaymentMethod = availablePaymentMethods?.find(p => p.id === value); - if (selectedPaymentMethod) { - onAdd({ - displayName: selectedPaymentMethod?.display_name, - fields: selectedPaymentMethod?.fields, - method: value, - }); - } - }} - // TODO: Remember to translate this - value={selectedPaymentMethod?.display_name ?? ''} - variant='comboBox' +
+ {Object.keys(selectedPaymentMethod?.fields || {})?.map(field => { + const paymentMethodField = selectedPaymentMethod?.fields?.[field]; + return ( + - {/* TODO: Remember to translate these */} - - Don’t see your payment method? - - - - )} + ); + })}
- {Object.keys(selectedPaymentMethod?.fields || {})?.map(field => { - const paymentMethodField = selectedPaymentMethod?.fields?.[field]; - return ( - - ); - })} - + {(isMobile || !!selectedPaymentMethod) && ( + + )} - {actionType === 'EDIT' && (!isUpdateSuccessful || !updateError) && isModalOpen && ( - // TODO: Remember to translate these strings - { - setIsModalOpen(false); - }} - primaryButtonLabel="Don't cancel" - secondaryButtonLabel='Cancel' - title='Cancel your edits?' - /> - )} - {actionType === 'ADD' && (!isCreateSuccessful || !createError) && isModalOpen && ( - // TODO: Remember to translate these strings - { - setIsModalOpen(false); - }} - primaryButtonLabel='Go back' - secondaryButtonLabel='Cancel' - title='Cancel adding this payment method?' - /> - )} - {/* TODO: Remember to translate these strings */} - {(createError || updateError) && ( - { - onResetFormState(); - }} - title='Something’s not right' - /> - )} +
); }; diff --git a/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx new file mode 100644 index 000000000000..fe7513339fe9 --- /dev/null +++ b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx @@ -0,0 +1,101 @@ +import React from 'react'; +import { THooks, TSelectedPaymentMethod } from 'types'; +import { Dropdown } from '@/components'; +import { TFormState } from '@/reducers/types'; +import { Button, Input, Text } from '@deriv-com/ui'; +import CloseCircle from '../../../public/ic-close-circle.svg'; + +type TPaymentMethodFormAutocompleteProps = { + actionType: TFormState['actionType']; + availablePaymentMethods?: THooks.PaymentMethods.Get; + availablePaymentMethodsList: { text: string; value: string }[]; + onAdd: (selectedPaymentMethod?: TSelectedPaymentMethod) => void; + reset: () => void; + selectedPaymentMethod: TFormState['selectedPaymentMethod']; +}; + +const PaymentMethodFormAutocomplete = ({ + actionType, + availablePaymentMethods, + availablePaymentMethodsList, + onAdd, + reset, + selectedPaymentMethod, +}: TPaymentMethodFormAutocompleteProps) => { + if (selectedPaymentMethod) { + // TODO: Remember to translate this + return ( + { + onAdd(); + reset(); + }} + width={15.7} + /> + ) + } + /> + ); + } + return ( + <> + { + const selectedPaymentMethod = availablePaymentMethods?.find(p => p.id === value); + if (selectedPaymentMethod) { + onAdd({ + displayName: selectedPaymentMethod?.display_name, + fields: selectedPaymentMethod?.fields, + method: value, + }); + } + }} + // TODO: Remember to translate this + value={selectedPaymentMethod?.display_name ?? ''} + variant='comboBox' + /> +
+ {/* TODO: Remember to translate these */} + + Don’t see your payment method? + + +
+ + ); +}; + +export default PaymentMethodFormAutocomplete; diff --git a/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/index.ts b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/index.ts new file mode 100644 index 000000000000..7ba73b1f81c5 --- /dev/null +++ b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/index.ts @@ -0,0 +1 @@ +export { default as PaymentMethodFormAutocomplete } from './PaymentMethodFormAutocomplete'; diff --git a/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormModalRenderer/PaymentMethodFormModalRenderer.tsx b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormModalRenderer/PaymentMethodFormModalRenderer.tsx new file mode 100644 index 000000000000..3d9870de3d6f --- /dev/null +++ b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormModalRenderer/PaymentMethodFormModalRenderer.tsx @@ -0,0 +1,76 @@ +import React from 'react'; +import { PaymentMethodErrorModal, PaymentMethodModal } from '@/components/Modals'; +import { TFormState } from '@/reducers/types'; +import { TSocketError } from '@deriv/api-v2/types'; + +type TPaymentMethodFormModalRendererProps = { + actionType: TFormState['actionType']; + createError: TSocketError<'p2p_advertiser_payment_methods'> | null; + isCreateSuccessful: boolean; + isModalOpen: boolean; + isUpdateSuccessful: boolean; + onResetFormState: () => void; + setIsModalOpen: (isModalOpen: boolean) => void; + updateError: TSocketError<'p2p_advertiser_payment_methods'> | null; +}; + +const PaymentMethodFormModalRenderer = ({ + actionType, + createError, + isCreateSuccessful, + isModalOpen, + isUpdateSuccessful, + onResetFormState, + setIsModalOpen, + updateError, +}: TPaymentMethodFormModalRendererProps) => { + if (actionType === 'ADD' && (!isCreateSuccessful || !createError) && isModalOpen) { + return ( + { + setIsModalOpen(false); + }} + primaryButtonLabel='Go back' + secondaryButtonLabel='Cancel' + title='Cancel adding this payment method?' + /> + ); + } + + if (actionType === 'EDIT' && (!isUpdateSuccessful || !updateError) && isModalOpen) { + return ( + { + setIsModalOpen(false); + }} + primaryButtonLabel="Don't cancel" + secondaryButtonLabel='Cancel' + title='Cancel your edits?' + /> + ); + } + + // TODO: Remember to translate these strings + if (createError || updateError) { + return ( + { + onResetFormState(); + }} + title='Something’s not right' + /> + ); + } + + return null; +}; + +export default PaymentMethodFormModalRenderer; diff --git a/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormModalRenderer/index.ts b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormModalRenderer/index.ts new file mode 100644 index 000000000000..9a05d2b45aab --- /dev/null +++ b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormModalRenderer/index.ts @@ -0,0 +1 @@ +export { default as PaymentMethodFormModalRenderer } from './PaymentMethodFormModalRenderer'; diff --git a/packages/p2p-v2/src/components/PaymentMethodForm/__test__/PaymentMethodForm.spec.tsx b/packages/p2p-v2/src/components/PaymentMethodForm/__test__/PaymentMethodForm.spec.tsx index 9292bfeddff2..338e2bd522ed 100644 --- a/packages/p2p-v2/src/components/PaymentMethodForm/__test__/PaymentMethodForm.spec.tsx +++ b/packages/p2p-v2/src/components/PaymentMethodForm/__test__/PaymentMethodForm.spec.tsx @@ -55,6 +55,11 @@ const mockPaymentMethods = [ }, ] as const; +jest.mock('@deriv-com/ui', () => ({ + ...jest.requireActual('@deriv-com/ui'), + useDevice: () => ({ isMobile: false }), +})); + jest.mock('@deriv/api-v2', () => { return { ...jest.requireActual('@deriv/api-v2'), @@ -167,7 +172,7 @@ describe('PaymentMethodForm', () => { ); const inputField = screen.getByDisplayValue('00112233445566778899'); expect(inputField).toBeInTheDocument(); - const backArrow = screen.getByTestId('dt_p2p_v2_payment_methods_header_left_arrow_icon'); + const backArrow = screen.getByTestId('dt_p2p_v2_page_return_btn'); userEvent.click(backArrow); expect(onResetFormState).toHaveBeenCalled(); }); @@ -435,7 +440,7 @@ describe('PaymentMethodForm', () => { await userEvent.type(inputField, 'Account 2'); await userEvent.tab(); }); - const backArrow = screen.getByTestId('dt_p2p_v2_payment_methods_header_left_arrow_icon'); + const backArrow = screen.getByTestId('dt_p2p_v2_page_return_btn'); expect(backArrow).toBeInTheDocument(); userEvent.click(backArrow); expect(screen.getByText('Cancel adding this payment method?')).toBeInTheDocument(); @@ -465,7 +470,7 @@ describe('PaymentMethodForm', () => { await userEvent.type(inputField, 'Account 2'); await userEvent.tab(); }); - const backArrow = screen.getByTestId('dt_p2p_v2_payment_methods_header_left_arrow_icon'); + const backArrow = screen.getByTestId('dt_p2p_v2_page_return_btn'); expect(backArrow).toBeInTheDocument(); userEvent.click(backArrow); expect(screen.getByText('Cancel your edits?')).toBeInTheDocument(); diff --git a/packages/p2p-v2/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss b/packages/p2p-v2/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss index e27a938e2119..b9818530ebd7 100644 --- a/packages/p2p-v2/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss +++ b/packages/p2p-v2/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss @@ -1,16 +1,16 @@ -.p2p-v2-payment-method-form { - &__buttons { - display: flex; - justify-content: end; - gap: 1.6rem; +.p2p-v2-payment-methods-form-footer { + display: flex; + justify-content: end; + gap: 0.8rem; + background: #fff; + margin-top: 2rem; - &--cancel { - background: transparent; - border: 2px solid #999999; - - &:active:not([disabled]) { - border: 1px solid #999999; - } - } + @include mobile { + margin-top: 0; + width: 100%; + padding: 1.6rem 2.4rem; + border-top: 2px solid #f2f3f4; + position: absolute; + bottom: 2.2rem; } } diff --git a/packages/p2p-v2/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.tsx b/packages/p2p-v2/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.tsx index 1e50fc6db2f9..38eca89af4f5 100644 --- a/packages/p2p-v2/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.tsx +++ b/packages/p2p-v2/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { TFormState } from '@/reducers/types'; -import { Button } from '@deriv-com/ui'; +import { Button, useDevice } from '@deriv-com/ui'; import './PaymentMethodsFormFooter.scss'; type TPaymentMethodsFormFooterProps = { @@ -21,33 +21,39 @@ type TPaymentMethodsFormFooterProps = { * @returns {JSX.Element} * @example * **/ - const PaymentMethodsFormFooter = ({ actionType, handleGoBack, isDirty, isSubmitting, isValid, -}: TPaymentMethodsFormFooterProps) => ( -
- - {/* TODO: Remember to translate these */} - -
-); + handleGoBack(); + }} + size='lg' + textSize={textSize} + variant='outlined' + > + Cancel + + {/* TODO: Remember to translate these */} + +
+ ); +}; export default PaymentMethodsFormFooter; diff --git a/packages/p2p-v2/src/components/PaymentMethodsFormFooter/__tests__/PaymentMethodsFormFooter.spec.tsx b/packages/p2p-v2/src/components/PaymentMethodsFormFooter/__tests__/PaymentMethodsFormFooter.spec.tsx index 0c573d760de2..2b4908b0e1e9 100644 --- a/packages/p2p-v2/src/components/PaymentMethodsFormFooter/__tests__/PaymentMethodsFormFooter.spec.tsx +++ b/packages/p2p-v2/src/components/PaymentMethodsFormFooter/__tests__/PaymentMethodsFormFooter.spec.tsx @@ -3,6 +3,11 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import PaymentMethodsFormFooter from '../PaymentMethodsFormFooter'; +jest.mock('@deriv-com/ui', () => ({ + ...jest.requireActual('@deriv-com/ui'), + useDevice: () => ({ isMobile: false }), +})); + describe('PaymentMethodsFormFooter', () => { it('should render the PaymentMethodsFormFooter component correctly', () => { render( diff --git a/packages/p2p-v2/src/components/PaymentMethodsHeader/PaymentMethodsHeader.scss b/packages/p2p-v2/src/components/PaymentMethodsHeader/PaymentMethodsHeader.scss deleted file mode 100644 index a57c739871d7..000000000000 --- a/packages/p2p-v2/src/components/PaymentMethodsHeader/PaymentMethodsHeader.scss +++ /dev/null @@ -1,13 +0,0 @@ -.p2p-v2-payment-method-form { - &__header { - display: flex; - align-items: center; - } - &__back-button { - margin-right: 0.8rem; - line-height: 2rem; - & > * { - vertical-align: middle; - } - } -} diff --git a/packages/p2p-v2/src/components/PaymentMethodsHeader/PaymentMethodsHeader.tsx b/packages/p2p-v2/src/components/PaymentMethodsHeader/PaymentMethodsHeader.tsx deleted file mode 100644 index f7edddb6f5ac..000000000000 --- a/packages/p2p-v2/src/components/PaymentMethodsHeader/PaymentMethodsHeader.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import { LabelPairedArrowLeftLgBoldIcon } from '@deriv/quill-icons'; -import { Text } from '@deriv-com/ui'; -import './PaymentMethodsHeader.scss'; - -type TPaymentMethodsHeaderProps = { - onGoBack?: () => void; - title?: string; -}; - -/** - * @component This component is used to display the header of the PaymentMethods screen - * @param onGoBack - The function to be called when the back button is clicked - * @param title - The title of the header - * @returns {JSX.Element} - * @example - * **/ -const PaymentMethodsHeader = ({ onGoBack, title }: TPaymentMethodsHeaderProps) => ( -
-
- {onGoBack && ( - - )} -
- {/* TODO: Remember to translate this */} - - {title} - -
-); - -export default PaymentMethodsHeader; diff --git a/packages/p2p-v2/src/components/PaymentMethodsHeader/__tests__/PaymentMethodsHeader.spec.tsx b/packages/p2p-v2/src/components/PaymentMethodsHeader/__tests__/PaymentMethodsHeader.spec.tsx deleted file mode 100644 index a2fa46bb659b..000000000000 --- a/packages/p2p-v2/src/components/PaymentMethodsHeader/__tests__/PaymentMethodsHeader.spec.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import PaymentMethodsHeader from '../PaymentMethodsHeader'; - -describe('PaymentMethodsHeader', () => { - it('should render the component correctly', () => { - render(); - expect(screen.getByText('Payment Methods')).toBeInTheDocument(); - }); - it('should render the arrow, when ongoback is passed in', () => { - render( undefined} title='Payment Methods' />); - expect(screen.getByTestId('dt_p2p_v2_payment_methods_header_left_arrow_icon')).toBeInTheDocument(); - }); -}); diff --git a/packages/p2p-v2/src/components/PaymentMethodsHeader/index.ts b/packages/p2p-v2/src/components/PaymentMethodsHeader/index.ts deleted file mode 100644 index db196b152fdc..000000000000 --- a/packages/p2p-v2/src/components/PaymentMethodsHeader/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as PaymentMethodsHeader } from './PaymentMethodsHeader'; diff --git a/packages/p2p-v2/src/components/PopoverDropdown/PopoverDropdown.scss b/packages/p2p-v2/src/components/PopoverDropdown/PopoverDropdown.scss index 4d716a41f38a..600923758749 100644 --- a/packages/p2p-v2/src/components/PopoverDropdown/PopoverDropdown.scss +++ b/packages/p2p-v2/src/components/PopoverDropdown/PopoverDropdown.scss @@ -19,14 +19,22 @@ background: #fff; right: 0; - .derivs-button__color--primary:hover:not(:disabled) { - background-color: var(--general-hover); - } - &-item { padding: 1rem 1.6rem; - background-color: inherit; height: inherit; + justify-content: start; + border-radius: unset; + + // TODO: remove this once hover styles can be removed from the button component + &:hover { + // stylelint-disable-next-line declaration-no-important + background-color: #e6e9e9 !important; + + & span { + // stylelint-disable-next-line declaration-no-important + color: #333 !important; + } + } } } } diff --git a/packages/p2p-v2/src/components/PopoverDropdown/PopoverDropdown.tsx b/packages/p2p-v2/src/components/PopoverDropdown/PopoverDropdown.tsx index 7ad648abab96..e66a1b5b5260 100644 --- a/packages/p2p-v2/src/components/PopoverDropdown/PopoverDropdown.tsx +++ b/packages/p2p-v2/src/components/PopoverDropdown/PopoverDropdown.tsx @@ -1,7 +1,7 @@ import React, { useRef, useState } from 'react'; -import { Button, Text } from '@deriv-com/ui'; import { useOnClickOutside } from 'usehooks-ts'; import { LabelPairedEllipsisVerticalMdRegularIcon } from '@deriv/quill-icons'; +import { Button, Text } from '@deriv-com/ui'; import './PopoverDropdown.scss'; type TItem = { @@ -32,11 +32,13 @@ const PopoverDropdown = ({ dataTestId, dropdownList, onClick }: TPopoverDropdown {dropdownList.map(item => ( diff --git a/packages/p2p-v2/src/components/Table/Table.tsx b/packages/p2p-v2/src/components/Table/Table.tsx index 02a259111f9e..9c70ec4c24dc 100644 --- a/packages/p2p-v2/src/components/Table/Table.tsx +++ b/packages/p2p-v2/src/components/Table/Table.tsx @@ -8,7 +8,7 @@ import './Table.scss'; type TProps = { columns?: ColumnDef[]; data: T[]; - emptyDataMessage: string; + emptyDataMessage?: string; groupBy?: GroupingState; isFetching: boolean; loadMoreFunction: () => void; diff --git a/packages/p2p-v2/src/components/index.ts b/packages/p2p-v2/src/components/index.ts index c31e0f57903a..f905006c8ab8 100644 --- a/packages/p2p-v2/src/components/index.ts +++ b/packages/p2p-v2/src/components/index.ts @@ -11,6 +11,7 @@ export * from './FlyoutMenu'; export * from './FormProgress'; export * from './FullPageMobileWrapper'; export * from './Input'; +export * from './LightDivider'; export * from './MobileTabs'; export * from './OnlineStatus'; export * from './PageReturn'; @@ -19,7 +20,6 @@ export * from './PaymentMethodField'; export * from './PaymentMethodForm'; export * from './PaymentMethodLabel'; export * from './PaymentMethodsFormFooter'; -export * from './PaymentMethodsHeader'; export * from './PaymentMethodWithIcon'; export * from './PopoverDropdown'; export * from './ProfileContent'; diff --git a/packages/p2p-v2/src/pages/buy-sell/components/CurrencyDropdown/CurrencyDropdown.scss b/packages/p2p-v2/src/pages/buy-sell/components/CurrencyDropdown/CurrencyDropdown.scss index dd60cf477bf7..ac88eb2590b8 100644 --- a/packages/p2p-v2/src/pages/buy-sell/components/CurrencyDropdown/CurrencyDropdown.scss +++ b/packages/p2p-v2/src/pages/buy-sell/components/CurrencyDropdown/CurrencyDropdown.scss @@ -48,7 +48,6 @@ position: absolute; top: 0; left: 0; - background: #fff; z-index: 1; height: calc(100vh - 12rem); diff --git a/packages/p2p-v2/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.tsx b/packages/p2p-v2/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.tsx index e8bd16bcee9e..ec1d42c72c8b 100644 --- a/packages/p2p-v2/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.tsx +++ b/packages/p2p-v2/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.tsx @@ -13,6 +13,7 @@ type TMyAdsDisplayWrapperProps = { const MyAdsDisplayWrapper = ({ children, isPaused, onClickToggle }: PropsWithChildren) => { const { isMobile } = useDevice(); const history = useHistory(); + if (isMobile) { return ( span { + font-size: 1.4rem; + } } } } diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfile/MyProfile.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfile/MyProfile.tsx index 34b444bc4445..3567ac865562 100644 --- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfile/MyProfile.tsx +++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfile/MyProfile.tsx @@ -22,6 +22,13 @@ const MyProfile = () => { const currentTab = queryString.tab; + const tabs = [ + { component: , title: 'Stats' }, + { component: , title: 'Payment methods' }, + { component: , title: 'Ad details' }, + { component: , title: 'My counterparties' }, + ]; + useEffect(() => { const isPoaPoiVerified = (!isP2PPoaRequired || isPoaVerified) && isPoiVerified; if (isPoaPoiVerified && !!failureReason) setIsNicknameModalOpen(true); @@ -49,26 +56,19 @@ const MyProfile = () => { { setQueryString({ tab: TABS[index], }); }} variant='primary' - wrapperClassName='p2p-v2-my-profile__tabs' > - - - - - - - - - - - - + {tabs.map(tab => ( + + {tab.component} + + ))}
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfile/__tests__/MyProfile.spec.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfile/__tests__/MyProfile.spec.tsx index 4181df7ce8cd..e7b2efc1e5db 100644 --- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfile/__tests__/MyProfile.spec.tsx +++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfile/__tests__/MyProfile.spec.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { useAdvertiserStats, usePoiPoaStatus } from '@/hooks'; -import { useDevice } from '@deriv-com/ui'; import { APIProvider, AuthProvider } from '@deriv/api-v2'; +import { useDevice } from '@deriv-com/ui'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import MyProfile from '../MyProfile'; @@ -64,9 +64,6 @@ jest.mock('@/hooks', () => ({ failureReason: undefined, isLoading: false, }), - useDevice: jest.fn().mockReturnValue({ - isMobile: false, - }), usePoiPoaStatus: jest.fn().mockReturnValue({ data: { isP2PPoaRequired: false, diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss index 85948470ada0..f4f879a9cc62 100644 --- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss +++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss @@ -3,7 +3,6 @@ flex-direction: column; align-items: flex-end; gap: 2.4rem; - width: 67vw; &__header { font-size: 1.6rem; @@ -11,11 +10,16 @@ } @include mobile { - width: 100vw; padding: 2rem; } &__border { border-top: 2px solid #f2f3f4; } + + &__mobile-wrapper { + position: absolute; + top: 4rem; + height: calc(100vh - 8rem); + } } diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.tsx index c4cbec976aeb..da5a843fe77b 100644 --- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.tsx +++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.tsx @@ -68,6 +68,7 @@ const MyProfileAdDetails = () => { if (isMobile) { return ( setQueryString({ tab: 'default', @@ -98,7 +99,7 @@ const MyProfileAdDetails = () => { setContactInfo={setContactInfo} />
-
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterparties.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterparties.tsx index 5c2cc3f98bc0..80ead93019fb 100644 --- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterparties.tsx +++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterparties.tsx @@ -15,6 +15,7 @@ const MyProfileCounterpartiesDisplayWrapper = ({ children }: PropsWithChildren setQueryString({ tab: 'default', diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.scss b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.scss index e388c8f69578..a1ca5262605f 100644 --- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.scss +++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.scss @@ -1,11 +1,12 @@ .p2p-v2-my-profile-counterparties-header { display: grid; gap: 1.6rem; - margin: 2.4rem 0; + margin-top: 2.4rem; grid-template-columns: repeat(3, 1fr); @include mobile { display: flex; + margin: 2.4rem 0; .p2p-v2-search { max-width: 28rem; @@ -25,10 +26,5 @@ border-radius: 4px; padding: 0 1rem; height: 4rem; - background-color: #fff; - - &:active { - background-color: #fff; - } } } diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.tsx index bc8bdd1ec663..df190d208a0f 100644 --- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.tsx +++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.tsx @@ -23,16 +23,21 @@ const MyProfileCounterpartiesHeader = ({ return (
- {`When you block someone, you won’t see their ads, and they can’t see yours. Your ads will be hidden from their search results, too.`} + When you block someone, you won’t see their ads, and they can’t see yours. Your ads will be hidden from + their search results, too.
{/* TODO: to be replaced by deriv-com/ui search component */} {/* TODO: to be replaced by deriv-com/ui dropdown component */} {isMobile ? ( - +
{/* TODO: variant to be replaced after available in @deriv-com/ui */} -
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx index 6dfe15669904..4ae7cce94af6 100644 --- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx +++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx @@ -5,10 +5,15 @@ import MyProfileCounterpartiesTableRow from '../MyProfileCounterpartiesTableRow' const mockProps = { id: 'id1', + is_blocked: false, nickname: 'nickname', - isBlocked: false, }; +jest.mock('@deriv-com/ui', () => ({ + ...jest.requireActual('@deriv-com/ui'), + useDevice: () => ({ isMobile: false }), +})); + jest.mock('@/components/UserAvatar', () => ({ UserAvatar: () =>
UserAvatar
, })); @@ -26,15 +31,15 @@ jest.mock('@deriv/api-v2', () => ({ }, })); -const el_modal = document.createElement('div'); +const elModal = document.createElement('div'); describe('MyProfileCounterpartiesTableRow', () => { beforeAll(() => { - el_modal.setAttribute('id', 'v2_modal_root'); - document.body.appendChild(el_modal); + elModal.setAttribute('id', 'v2_modal_root'); + document.body.appendChild(elModal); }); afterAll(() => { - document.body.removeChild(el_modal); + document.body.removeChild(elModal); }); it('should render the component as expected', () => { render(); @@ -49,7 +54,7 @@ describe('MyProfileCounterpartiesTableRow', () => { expect(screen.getByText('Block nickname?')).toBeInTheDocument(); }); }); - it('should close modal for onrequest close of modal', async () => { + it('should close modal for onRequest close of modal', async () => { render(); userEvent.click(screen.getByText('Block')); await waitFor(() => { diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsItem.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsItem.tsx index a13e240d50e6..a4b00bc82f1c 100644 --- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsItem.tsx +++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsItem.tsx @@ -1,6 +1,5 @@ import React, { useState } from 'react'; -import clsx from 'clsx'; -import { Text } from '@deriv-com/ui'; +import { Text, useDevice } from '@deriv-com/ui'; import './MyProfileStatsItem.scss'; type TMyProfileStatsItemProps = { @@ -22,41 +21,45 @@ const MyProfileStatsItem = ({ value, }: TMyProfileStatsItemProps) => { const [hasClickedLifetime, setHasClickedLifetime] = useState(false); + const { isMobile } = useDevice(); + const textSize = isMobile ? 'xs' : 'sm'; const onClickLabel = (showLifetime: boolean) => { setHasClickedLifetime(showLifetime); onClickLifetime?.(showLifetime); }; + // TODO: Replace the button components below with Button once you can remove hover effect from Button return (
- {label} + + {label}{' '} + {shouldShowDuration && ( - )}{' '} {shouldShowLifetime && ( <> - |{' '} - )}
- + {value} {currency}
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsMobile.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsMobile.tsx index 5f8569b02628..61d998e64113 100644 --- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsMobile.tsx +++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsMobile.tsx @@ -8,6 +8,7 @@ const MyProfileStatsMobile = () => { const { setQueryString } = useQueryString(); return ( setQueryString({ tab: 'default', diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/__tests__/MyProfileStats.spec.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/__tests__/MyProfileStats.spec.tsx index 459dc1926cd9..23d853c8b7a4 100644 --- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/__tests__/MyProfileStats.spec.tsx +++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/__tests__/MyProfileStats.spec.tsx @@ -33,10 +33,16 @@ const mockUseActiveAccount = { isLoading: false, }; +jest.mock('@deriv-com/ui', () => ({ + ...jest.requireActual('@deriv-com/ui'), + useDevice: () => ({ isMobile: false }), +})); + jest.mock('@/hooks', () => ({ ...jest.requireActual('@/hooks'), useAdvertiserStats: jest.fn(() => mockUseAdvertiserStats), })); + jest.mock('@deriv/api-v2', () => ({ ...jest.requireActual('@deriv/api-v2'), useActiveAccount: jest.fn(() => mockUseActiveAccount), diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/__tests__/MyProfileStatsItem.spec.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/__tests__/MyProfileStatsItem.spec.tsx index d819b5e0d49c..56b5b12b85ad 100644 --- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/__tests__/MyProfileStatsItem.spec.tsx +++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/__tests__/MyProfileStatsItem.spec.tsx @@ -1,7 +1,12 @@ import React, { useState } from 'react'; import { render, screen } from '@testing-library/react'; -import MyProfileStatsItem from '../MyProfileStatsItem'; import userEvent from '@testing-library/user-event'; +import MyProfileStatsItem from '../MyProfileStatsItem'; + +jest.mock('@deriv-com/ui', () => ({ + ...jest.requireActual('@deriv-com/ui'), + useDevice: () => ({ isMobile: false }), +})); const MockApp = () => { const [shouldShowLifetime, setShouldShowLifetime] = useState(false); diff --git a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.scss b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.scss index 06c7d03b9d42..1041ee357902 100644 --- a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.scss +++ b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.scss @@ -5,7 +5,7 @@ width: 100%; @include mobile { - height: 100%; + margin-top: 7rem; justify-content: center; } diff --git a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.tsx b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.tsx index fd0d191ec39d..f7984a382051 100644 --- a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.tsx +++ b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { FullPageMobileWrapper, PaymentMethodsHeader } from '@/components'; -import { useDevice, useQueryString } from '@/hooks'; +import { FullPageMobileWrapper } from '@/components'; +import { useQueryString } from '@/hooks'; import { DerivLightIcPaymentMethodsWalletIcon } from '@deriv/quill-icons'; -import { Button, Text } from '@deriv-com/ui'; +import { Button, Text, useDevice } from '@deriv-com/ui'; import './PaymentMethodsEmpty.scss'; type TPaymentMethodsEmptyProps = { @@ -22,12 +22,17 @@ const PaymentMethodsEmpty = ({ onAddPaymentMethod }: TPaymentMethodsEmptyProps) if (isMobile) { return ( { setQueryString({ tab: 'default', }); }} - renderHeader={() => } + renderHeader={() => ( + + Payment Methods + + )} >
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/__tests__/PaymentMethodsEmpty.spec.tsx b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/__tests__/PaymentMethodsEmpty.spec.tsx index 5ba5b307a604..24d8b09f2a2e 100644 --- a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/__tests__/PaymentMethodsEmpty.spec.tsx +++ b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/__tests__/PaymentMethodsEmpty.spec.tsx @@ -1,21 +1,22 @@ import React from 'react'; -import { useDevice, useQueryString } from '@/hooks'; +import { useQueryString } from '@/hooks'; +import { useDevice } from '@deriv-com/ui'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import PaymentMethodsEmpty from '../PaymentMethodsEmpty'; jest.mock('@/hooks', () => ({ ...jest.requireActual('@/hooks'), - useDevice: jest.fn().mockReturnValue({ - isDesktop: false, - isMobile: false, - isTablet: false, - }), useQueryString: jest.fn().mockReturnValue({ setQueryString: jest.fn() }), })); +jest.mock('@deriv-com/ui', () => ({ + ...jest.requireActual('@deriv-com/ui'), + useDevice: jest.fn().mockReturnValue({ isDesktop: false, isMobile: false, isTablet: false }), +})); + const mockUseDevice = useDevice as jest.MockedFunction; -const mockuseQueryString = useQueryString as jest.MockedFunction; +const mockUseQueryString = useQueryString as jest.MockedFunction; describe('PaymentMethodsEmpty', () => { it('should render the component correctly', () => { @@ -25,14 +26,14 @@ describe('PaymentMethodsEmpty', () => { expect(screen.getByText('Hit the button below to add payment methods.')).toBeInTheDocument(); expect(screen.getByText('Add payment methods')).toBeInTheDocument(); }); - it('should call onaddpaymentmethods when ismobile is false', () => { + it('should call onAddPaymentMethods when isMobile is false', () => { const mockOnAddPaymentMethod = jest.fn(); render(); const button = screen.getByRole('button', { name: 'Add payment methods' }); userEvent.click(button); expect(mockOnAddPaymentMethod).toHaveBeenCalled(); }); - it('should call onaddpaymentmethods when ismobile is true', () => { + it('should call onAddPaymentMethods when isMobile is true', () => { mockUseDevice.mockReturnValueOnce({ isDesktop: false, isMobile: true, @@ -44,15 +45,15 @@ describe('PaymentMethodsEmpty', () => { userEvent.click(button); expect(onAddPaymentMethod).toHaveBeenCalled(); }); - it('should render the correct content when ismobile is false', () => { + it('should render the correct content when isMobile is false', () => { const mockOnAddPaymentMethod = jest.fn(); render(); expect(screen.getByText('You haven’t added any payment methods yet')).toBeInTheDocument(); expect(screen.getByText('Hit the button below to add payment methods.')).toBeInTheDocument(); expect(screen.getByText('Add payment methods')).toBeInTheDocument(); - expect(screen.queryByTestId('dt_p2p_v2_full_page_mobile_wrapper')).not.toBeInTheDocument(); + expect(screen.queryByTestId('dt_p2p_v2_mobile_wrapper_button')).not.toBeInTheDocument(); }); - it('should render the correct content when ismobile is true', () => { + it('should render the correct content when isMobile is true', () => { mockUseDevice.mockReturnValueOnce({ isDesktop: false, isMobile: true, @@ -63,10 +64,10 @@ describe('PaymentMethodsEmpty', () => { expect(screen.getByText('You haven’t added any payment methods yet')).toBeInTheDocument(); expect(screen.getByText('Hit the button below to add payment methods.')).toBeInTheDocument(); expect(screen.getByText('Add payment methods')).toBeInTheDocument(); - expect(screen.getByTestId('dt_p2p_v2_full_page_mobile_wrapper')).toBeInTheDocument(); + expect(screen.getByTestId('dt_p2p_v2_mobile_wrapper_button')).toBeInTheDocument(); }); - it('should call setQueryString when ismobile is true', () => { - const { setQueryString: mockSetQueryString } = mockuseQueryString(); + it('should call setQueryString when isMobile is true', () => { + const { setQueryString: mockSetQueryString } = mockUseQueryString(); mockUseDevice.mockReturnValueOnce({ isDesktop: false, isMobile: true, diff --git a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/AddNewButton.tsx b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/AddNewButton.tsx index 05394cdbb0aa..1896378eac5c 100644 --- a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/AddNewButton.tsx +++ b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/AddNewButton.tsx @@ -14,8 +14,9 @@ type TAddNewButtonProps = { * @example * **/ const AddNewButton = ({ isMobile, onAdd }: TAddNewButtonProps) => ( - ); diff --git a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.scss b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.scss index 449fa9d4f020..7683bac0b3ab 100644 --- a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.scss +++ b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.scss @@ -1,19 +1,19 @@ .p2p-v2-payment-methods-list { - width: 100%; - @include mobile { - max-width: 67.2rem; - min-width: 36rem; - padding: 1rem 2rem; - } - &__group { - margin-top: 2.4rem; - &-body { - display: flex; - flex-wrap: wrap; - margin-bottom: 5rem; - @include mobile { - justify-content: flex-start; - gap: 1.6rem; + &__mobile-wrapper { + position: absolute; + top: 4rem; + + & .p2p-v2-mobile-wrapper { + &__body { + height: calc(100vh - 22rem); + overflow-y: scroll; + } + + &__footer { + position: fixed; + background: #fff; + bottom: 0; + width: 100%; } } } diff --git a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.tsx b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.tsx index f1961a5954db..ceaea2ea0ccb 100644 --- a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.tsx +++ b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.tsx @@ -1,10 +1,11 @@ import React from 'react'; import { THooks, TSelectedPaymentMethod } from 'types'; -import { FullPageMobileWrapper, PaymentMethodsHeader } from '@/components'; -import { useDevice, useQueryString } from '@/hooks'; +import { FullPageMobileWrapper } from '@/components'; +import { useQueryString } from '@/hooks'; import { TFormState } from '@/reducers/types'; +import { Text, useDevice } from '@deriv-com/ui'; import AddNewButton from './AddNewButton'; -import PaymentMethodsListContent from './PaymentMethodsListContent'; +import { PaymentMethodsListContent } from './PaymentMethodsListContent'; import './PaymentMethodsList.scss'; type TPaymentMethodsListProps = { @@ -36,6 +37,7 @@ const PaymentMethodsList = ({ if (isMobile) { return ( setQueryString({ tab: 'default', @@ -43,7 +45,11 @@ const PaymentMethodsList = ({ } renderFooter={() => } // TODO: Remember to translate the title - renderHeader={() => } + renderHeader={() => ( + + Payment methods + + )} > {!!p2pAdvertiserPaymentMethods?.length && ( +
{!isMobile && } {Object.keys(groupedPaymentMethods)?.map(key => { return ( -
- +
+ {groupedPaymentMethods[key].title} -
+
{groupedPaymentMethods[key].paymentMethods?.map(advertiserPaymentMethod => { return ( jest.fn().mockReturnValue(
PaymentMethodsListContent
)); +jest.mock('../PaymentMethodsListContent/PaymentMethodsListContent', () => + jest.fn().mockReturnValue(
PaymentMethodsListContent
) +); jest.mock('@/hooks', () => ({ ...jest.requireActual('@/hooks'), - useDevice: jest.fn().mockReturnValue({ - isDesktop: false, - isMobile: false, - isTablet: false, - }), useQueryString: jest.fn().mockReturnValue({ setQueryString: jest.fn() }), })); +jest.mock('@deriv-com/ui', () => ({ + ...jest.requireActual('@deriv-com/ui'), + useDevice: jest.fn().mockReturnValue({ isDesktop: true, isMobile: false, isTablet: false }), +})); + const mockUseDevice = useDevice as jest.MockedFunction; const mockUseQueryString = useQueryString as jest.MockedFunction; describe('PaymentMethodsList', () => { - it('should render the component when an empty list of payment methods is provided and ismobile is true', () => { + it('should render the component when an empty list of payment methods is provided and isMobile is true', () => { mockUseDevice.mockReturnValueOnce({ isDesktop: false, isMobile: true, @@ -38,7 +41,7 @@ describe('PaymentMethodsList', () => { ); expect(screen.queryByText('PaymentMethodsListContent')).not.toBeInTheDocument(); }); - it('should render the component when an empty list of payment methods is provided and ismobile is false', () => { + it('should render the component when an empty list of payment methods is provided and isMobile is false', () => { mockUseDevice.mockReturnValueOnce({ isDesktop: false, isMobile: false, @@ -56,7 +59,7 @@ describe('PaymentMethodsList', () => { ); expect(screen.queryByText('PaymentMethodsListContent')).not.toBeInTheDocument(); }); - it('should render the component when a list of payment methods is provided and ismobile is true', () => { + it('should render the component when a list of payment methods is provided and isMobile is true', () => { mockUseDevice.mockReturnValueOnce({ isDesktop: false, isMobile: true, @@ -85,7 +88,7 @@ describe('PaymentMethodsList', () => { ); expect(screen.queryByText('PaymentMethodsListContent')).toBeInTheDocument(); }); - it('should render the component when a list of payment methods is provided and ismobile is false', () => { + it('should render the component when a list of payment methods is provided and isMobile is false', () => { mockUseDevice.mockReturnValueOnce({ isDesktop: false, isMobile: false, diff --git a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/__test__/PaymentMethodsListContent.spec.tsx b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/__test__/PaymentMethodsListContent.spec.tsx index 0388f1d0fc79..941345ed1ca3 100644 --- a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/__test__/PaymentMethodsListContent.spec.tsx +++ b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/__test__/PaymentMethodsListContent.spec.tsx @@ -4,7 +4,7 @@ import { PaymentMethodErrorModal, PaymentMethodModal } from '@/components/Modals import { APIProvider, AuthProvider, p2p } from '@deriv/api-v2'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import PaymentMethodsListContent from '../PaymentMethodsListContent'; +import { PaymentMethodsListContent } from '../PaymentMethodsListContent'; const wrapper = ({ children }: { children: JSX.Element }) => ( diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCard.tsx b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCard.tsx index c1a38a3d3aa9..1c98168c909a 100644 --- a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCard.tsx +++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCard.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { Divider, useDevice } from '@deriv-com/ui'; +import { LightDivider } from '@/components'; +import { useDevice } from '@deriv-com/ui'; import { OrderDetailsCardFooter } from './OrderDetailsCardFooter'; import { OrderDetailsCardHeader } from './OrderDetailsCardHeader'; import { OrderDetailsCardInfo } from './OrderDetailsCardInfo'; @@ -12,9 +13,9 @@ const OrderDetailsCard = () => { return (
- + - + {isDesktop && }
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/ActiveOrderInfo/ActiveOrderInfo.tsx b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/ActiveOrderInfo/ActiveOrderInfo.tsx index f4bce14e61e5..3385934729b1 100644 --- a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/ActiveOrderInfo/ActiveOrderInfo.tsx +++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/ActiveOrderInfo/ActiveOrderInfo.tsx @@ -1,6 +1,7 @@ import React, { Fragment } from 'react'; +import { LightDivider } from '@/components'; import { useOrderDetails } from '@/providers/OrderDetailsProvider'; -import { Divider, Text, useDevice } from '@deriv-com/ui'; +import { Text, useDevice } from '@deriv-com/ui'; import { PaymentMethodAccordion } from '../PaymentMethodAccordion'; const ActiveOrderInfo = () => { @@ -24,13 +25,13 @@ const ActiveOrderInfo = () => { if (isActiveOrder) return ( <> - + - + {adDetails.map((detail, key) => (
@@ -39,7 +40,7 @@ const ActiveOrderInfo = () => { {detail.value}
- {key === 0 && } + {key === 0 && } ))} diff --git a/packages/p2p-v2/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.scss b/packages/p2p-v2/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.scss index d32c37c01732..8169e18ad9c4 100644 --- a/packages/p2p-v2/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.scss +++ b/packages/p2p-v2/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.scss @@ -12,7 +12,6 @@ position: absolute; top: 5rem; left: 0; - background: #fff; z-index: 1; height: calc(100vh - 9rem); diff --git a/packages/p2p-v2/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.tsx b/packages/p2p-v2/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.tsx index 1d3009b94ffe..85d22fb8c722 100644 --- a/packages/p2p-v2/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.tsx +++ b/packages/p2p-v2/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { FullPageMobileWrapper } from '@/components'; +import { FullPageMobileWrapper, LightDivider } from '@/components'; import { useExtendedOrderDetails, useSendbird } from '@/hooks'; -import { Divider, Loader, useDevice } from '@deriv-com/ui'; +import { Loader, useDevice } from '@deriv-com/ui'; import { ChatError, ChatFooter, ChatHeader, ChatMessages } from '../../components'; import './OrdersChatSection.scss'; @@ -56,9 +56,9 @@ const OrdersChatSection = ({ id, isInactive, onReturn, otherUserDetails }: TOrde ) : ( <> - + - + span { + font-size: 1.4rem; + } } } &__wrapper {