[FEQ] Added routes and tabs for My Profile page (#13113)

* chore: removed responsive root

* chore: reverted old changes

* feat: setup route for my-profile

* chore: refactored code based on reviews

* feat: added tabs for desktop view

* feat: added tabs for desktop view

* feat: added tabs for desktop view

* feat: added tabs for desktop view

* feat: added tabs for desktop view

* Delete packages/p2p-v2/package-lock.json.3009233934

* feat: added mobile tabs for p2p-v2

* feat: integrated usequerystring, added counterparties to tab

* chore: refactor daily limit modal

* feat: integrated payment methods

* fix: added default tab for my profile

* feat: added available balance modal

* refactor: my counterparties components to subfolders

* fix: issue with counterparties search bar not full width

* chore: refactored based on reviews

* chore: resolved code reviews

* fix: loader is fullscreen and eligibility for upgrde

* chore: fix sonarcloud issue, remove default value

packages/p2p-v2/src/components/AdvertiserName/AdvertiserNameToggle.scss

@@ -3,7 +3,10 @@
     gap: 0.8rem;
 
     @include mobile {
+        padding: 1.4rem 1.6rem;
         justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid #f2f3f4;
     }
 
     &__label {

packages/p2p-v2/src/components/MobileCloseHeader/MobileCloseHeader.scss → packages/p2p-v2/src/components/CloseHeader/CloseHeader.scss

@@ -1,4 +1,4 @@
-.p2p-v2-mobile-close-header {
+.p2p-v2-close-header {
     width: 100%;
     height: 4rem;
     display: flex;
@@ -7,6 +7,13 @@
     font-size: 1.6rem;
     font-weight: 800;
     border-bottom: 2px solid #f2f3f4;
+    padding: 2.4rem;
+    margin-bottom: 2.4rem;
+
+    @include mobile {
+        padding: 0.8rem 2.4rem;
+        margin-bottom: 0;
+    }
 
     &--icon {
         position: absolute;

packages/p2p-v2/src/components/CloseHeader/CloseHeader.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useDevice } from '../../hooks';
+import CrossIcon from '../../public/ic-cross.svg';
+import './CloseHeader.scss';
+import { Text } from '@deriv-com/ui/dist/components/Text';
+
+const CloseHeader = () => {
+    const { isMobile } = useDevice();
+
+    return (
+        <div className='p2p-v2-close-header'>
+            <Text size={isMobile ? 'md' : 'xl'} weight='bold'>
+                {isMobile ? 'Deriv P2P' : 'Cashier'}
+            </Text>
+            <CrossIcon className='p2p-v2-close-header--icon' onClick={() => window.history.back()} />
+        </div>
+    );
+};
+
+export default CloseHeader;

packages/p2p-v2/src/components/CloseHeader/index.ts

@@ -0,0 +1 @@
+export { default as CloseHeader } from './CloseHeader';

packages/p2p-v2/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss

@@ -7,7 +7,7 @@
         grid-template-rows: 6rem auto;
 
         &--fixed-footer {
-            grid-template-rows: 6rem auto 12rem;
+            grid-template-rows: 6rem auto 8rem;
         }
 
         &--no-header {

packages/p2p-v2/src/components/FullPageMobileWrapper/FullPageMobileWrapper.tsx

@@ -4,16 +4,20 @@ import LeftArrowIcon from '../../public/ic-arrow-left.svg';
 import './FullPageMobileWrapper.scss';
 
 type TFullPageMobileWrapperProps = {
+    onBack?: () => void;
     renderFooter?: () => React.ReactNode;
     renderHeader?: () => React.ReactNode;
     shouldFixedFooter?: boolean;
+    shouldShowBackIcon?: boolean;
 };
 
 const FullPageMobileWrapper = ({
     children,
+    onBack = () => undefined,
     renderFooter,
     renderHeader,
     shouldFixedFooter = true,
+    shouldShowBackIcon = true,
 }: PropsWithChildren<TFullPageMobileWrapperProps>) => {
     return (
         <div
@@ -26,7 +30,7 @@ const FullPageMobileWrapper = ({
         >
             {renderHeader && (
                 <div className='p2p-v2-mobile-wrapper__header'>
-                    <LeftArrowIcon />
+                    {shouldShowBackIcon && <LeftArrowIcon onClick={onBack} />}
                     {renderHeader()}
                 </div>
             )}

packages/p2p-v2/src/components/MobileTabs/MobileTabs.scss

@@ -0,0 +1,15 @@
+.p2p-v2-mobile-tabs {
+    display: flex;
+    flex-direction: column;
+
+    & button {
+        padding: 2.3rem 1.6rem;
+        display: flex;
+        justify-content: space-between;
+        border-bottom: 0.1rem solid #e6e9e9;
+
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+}

packages/p2p-v2/src/components/MobileTabs/MobileTabs.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Text } from '@deriv-com/ui/dist/components/Text';
+import RightArrowIcon from '../../public/ic-chevron-right.svg';
+import './MobileTabs.scss';
+
+type TMobileTabsProps<T extends string[]> = {
+    onChangeTab: (clickedTab: T[number]) => void;
+    tabs: T;
+};
+
+function MobileTabs<T extends string[]>({ onChangeTab, tabs }: TMobileTabsProps<T>) {
+    return (
+        <div className='p2p-v2-mobile-tabs'>
+            {tabs.map((tab, i) => (
+                <button className='p2p-v2-mobile-tabs__tab' key={`${tab}-${i}`} onClick={() => onChangeTab(tab)}>
+                    <Text size='sm'>{tab}</Text>
+                    <RightArrowIcon />
+                </button>
+            ))}
+        </div>
+    );
+}
+
+export default MobileTabs;

packages/p2p-v2/src/components/MobileTabs/index.ts

@@ -0,0 +1 @@
+export { default as MobileTabs } from './MobileTabs';

packages/p2p-v2/src/components/Modals/AvailableP2PBalanceModal/AvailableP2PBalanceModal.scss

@@ -0,0 +1,32 @@
+.p2p-v2-available-p2p-balance-modal {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    right: auto;
+    bottom: auto;
+    transform: translate(-50%, -50%);
+    width: 44rem;
+    padding: 2.4rem;
+    border-radius: 8px;
+    background: #fff;
+    box-shadow: 0px 32px 64px 0px rgba(14, 14, 14, 0.14);
+
+    &__text {
+        margin: 2.4rem 0;
+
+        @include mobile {
+            margin: 1.6rem 0;
+        }
+    }
+
+    @include mobile {
+        padding: 1.6rem;
+        width: 32.8rem;
+    }
+
+    &__footer {
+        display: flex;
+        justify-content: flex-end;
+        gap: 0.8rem;
+    }
+}

packages/p2p-v2/src/components/Modals/AvailableP2PBalanceModal/AvailableP2PBalanceModal.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect } from 'react';
+import Modal from 'react-modal';
+import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Button } from '@deriv-com/ui/dist/components/Button';
+import { customStyles } from '../helpers';
+import './AvailableP2PBalanceModal.scss';
+
+type TAvailableP2PBalanceModalProps = {
+    isModalOpen: boolean;
+    onRequestClose: () => void;
+};
+
+const AvailableP2PBalanceModal = ({ isModalOpen, onRequestClose }: TAvailableP2PBalanceModalProps) => {
+    useEffect(() => {
+        Modal.setAppElement('#v2_modal_root');
+    }, []);
+
+    return (
+        <Modal
+            className='p2p-v2-available-p2p-balance-modal'
+            isOpen={isModalOpen}
+            onRequestClose={onRequestClose}
+            shouldCloseOnOverlayClick={false}
+            style={customStyles}
+        >
+            <Text as='p' weight='bold'>
+                Available Deriv P2P Balance
+            </Text>
+            <Text as='p' className='p2p-v2-block-unblock-user-modal__text' size='sm'>
+                Your Deriv P2P balance only includes deposits that can’t be reversed.
+            </Text>
+            <Text as='p' className='p2p-v2-block-unblock-user-modal__text' size='sm'>
+                Deposits via cards and the following payment methods aren’t included: Maestro, Diners Club, ZingPay,
+                Skrill, Neteller, Ozow, and UPI QR.
+            </Text>
+            <div className='p2p-v2-block-unblock-user-modal__footer'>
+                <Button onClick={onRequestClose} size='lg' textSize='sm'>
+                    Ok
+                </Button>
+            </div>
+        </Modal>
+    );
+};
+
+export default AvailableP2PBalanceModal;

packages/p2p-v2/src/components/Modals/AvailableP2PBalanceModal/index.ts

@@ -0,0 +1 @@
+export { default as AvailableP2PBalanceModal } from './AvailableP2PBalanceModal';

packages/p2p-v2/src/components/Modals/index.ts

@@ -1 +1,3 @@
+export * from './AvailableP2PBalanceModal';
+export * from './DailyLimitModal';
 export * from './PaymentMethods';

packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodForm.scss

@@ -1,7 +1,6 @@
 .p2p-v2-payment-method-form {
     max-width: 100%;
     min-width: 67.2rem;
-    padding: 0 2.4rem;
 
     @include mobile {
         width: 100%;

packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodForm.tsx

@@ -93,6 +93,7 @@ const PaymentMethodForm = ({ onAdd, onResetFormState, ...rest }: TPaymentMethodF
                     {selectedPaymentMethod ? (
                         // TODO: Remember to translate this
                         <Input
+                            defaultValue={selectedPaymentMethod?.display_name}
                             disabled
                             label='Choose your payment method'
                             rightPlaceholder={
@@ -109,7 +110,6 @@ const PaymentMethodForm = ({ onAdd, onResetFormState, ...rest }: TPaymentMethodF
                                     />
                                 )
                             }
-                            value={selectedPaymentMethod?.display_name}
                         />
                     ) : (
                         <>

packages/p2p-v2/src/components/UserAvatar/UserAvatar.tsx

@@ -1,8 +1,7 @@
 import React, { memo } from 'react';
 import clsx from 'clsx';
 import { Text } from '@deriv-com/ui/dist/components/Text';
-import { getShortNickname } from '../../utils/string';
-import { TGenericSizes } from '../../utils/types';
+import { getShortNickname, TGenericSizes } from '../../utils';
 import './UserAvatar.scss';
 
 type TUserAvatarProps = {

packages/p2p-v2/src/components/index.ts

@@ -1,8 +1,11 @@
 export * from './AdvertiserName';
 export * from './Badge';
 export * from './Button';
+export * from './CloseHeader';
 export * from './FullPageMobileWrapper';
-export * from './MobileCloseHeader';
+export * from './MobileTabs';
+export * from './Modals';
+export * from './PaymentMethodsHeader';
 export * from './RadioGroup';
 export * from './StarRating';
 export * from './Table';

packages/p2p-v2/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export { default as useAdvertiserStats } from './useAdvertiserStats';
 export { default as useDevice } from './useDevice';
 export { default as usePoiPoaStatus } from './usePoiPoaStatus';
+export { default as useQueryString } from './useQueryString';
 export { default as useSendbird } from './useSendbird';

packages/p2p-v2/src/hooks/useAdvertiserStats.ts

@@ -53,6 +53,9 @@ const useAdvertiserStats = (advertiserId?: string) => {
             /** Checks if the user is already an advertiser */
             isAdvertiser,
 
+            /** Checks if the user is eligible to upgrade their daily limits */
+            isEligibleForLimitUpgrade: Boolean(data?.upgradable_daily_limits),
+
             /** Checks if the advertiser has completed proof of identity verification */
             isIdentityVerified: isAdvertiser ? data?.full_verification : authenticationStatus?.identity?.status,