[WEBREL] / Ameerul / WEBREL-2302 Integrate Verification and NicknameModal components (deriv-com#13249)

ameerul-deriv · web-flow · commit 451ad04c57e5 · 2024-02-02T12:32:45.000+04:00
* feat: added verification + nickname modal flow

* fix: route to buy-sell onCancel button in nickname modal

* fix: check for p2p poa required

* chore: added suggestion
diff --git a/packages/p2p-v2/src/components/AdvertiserName/AdvertiserName.tsx b/packages/p2p-v2/src/components/AdvertiserName/AdvertiserName.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Loader, Text } from '@deriv-com/ui';
+import { useSettings } from '@deriv/api';
+import { Text } from '@deriv-com/ui';
 import { useAdvertiserStats, useDevice } from '../../hooks';
 import { UserAvatar } from '../UserAvatar';
 import AdvertiserNameBadges from './AdvertiserNameBadges';
@@ -8,18 +9,21 @@ import AdvertiserNameToggle from './AdvertiserNameToggle';
 import './AdvertiserName.scss';
 
 const AdvertiserName = () => {
-    const { data: advertiserStats, isLoading } = useAdvertiserStats();
+    const { data: advertiserStats } = useAdvertiserStats();
+    const {
+        data: { email },
+    } = useSettings();
     const { isDesktop } = useDevice();
 
-    if (isLoading || !advertiserStats) return <Loader />;
+    const name = advertiserStats?.name || email;
 
     return (
         <div className='p2p-v2-advertiser-name'>
-            <UserAvatar nickname={advertiserStats.name!} size={isDesktop ? 64 : 42} textSize='lg' />
+            <UserAvatar nickname={name!} size={isDesktop ? 64 : 42} textSize='lg' />
             <div className='p2p-v2-advertiser-name__details'>
                 <Text size='md' weight='bold'>
-                    {advertiserStats.name}{' '}
-                    {advertiserStats.show_name && (
+                    {name}{' '}
+                    {advertiserStats?.show_name && (
                         <Text color='less-prominent' size='sm'>
                             ({advertiserStats.fullName})
                         </Text>
diff --git a/packages/p2p-v2/src/components/AdvertiserName/AdvertiserNameBadges.tsx b/packages/p2p-v2/src/components/AdvertiserName/AdvertiserNameBadges.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Loader } from '@deriv-com/ui';
 import { useAdvertiserStats } from '../../hooks';
 import { Badge } from '../Badge';
 import './AdvertiserNameBadges.scss';
@@ -11,11 +10,9 @@ import './AdvertiserNameBadges.scss';
  * Use cases are usually in My Profile page and Advertiser page used under the advertiser's name
  */
 const AdvertiserNameBadges = () => {
-    const { data: advertiserStats, isLoading } = useAdvertiserStats();
+    const { data: advertiserStats } = useAdvertiserStats();
 
-    if (isLoading || !advertiserStats) return <Loader />;
-
-    const { isAddressVerified, isIdentityVerified, totalOrders } = advertiserStats;
+    const { isAddressVerified, isIdentityVerified, totalOrders } = advertiserStats || {};
 
     return (
         <div className='p2p-v2-advertiser-name-badges'>
diff --git a/packages/p2p-v2/src/components/AdvertiserName/AdvertiserNameStats.tsx b/packages/p2p-v2/src/components/AdvertiserName/AdvertiserNameStats.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Loader, Text } from '@deriv-com/ui';
+import { Text } from '@deriv-com/ui';
 import { useAdvertiserStats, useDevice } from '../../hooks';
 import ThumbUpIcon from '../../public/ic-thumb-up.svg';
 import BlockedUserOutlineIcon from '../../public/ic-user-blocked-outline.svg';
@@ -14,12 +14,11 @@ import './AdvertiserNameStats.scss';
  * Use cases are to show this in My Profile and Advertiser page
  */
 const AdvertiserNameStats = () => {
-    const { data: advertiserStats, isLoading } = useAdvertiserStats();
+    const { data: advertiserStats } = useAdvertiserStats();
     const { isMobile } = useDevice();
 
-    if (isLoading || !advertiserStats) return <Loader />;
-
-    const { blocked_by_count, daysSinceJoined, rating_average, rating_count, recommended_average } = advertiserStats;
+    const { blocked_by_count, daysSinceJoined, rating_average, rating_count, recommended_average } =
+        advertiserStats || {};
 
     return (
         <div className='p2p-v2-advertiser-name-stats'>
@@ -61,7 +60,7 @@ const AdvertiserNameStats = () => {
             <div>
                 <BlockedUserOutlineIcon />
                 <Text color='less-prominent' size='sm'>
-                    {blocked_by_count}
+                    {blocked_by_count || 0}
                 </Text>
             </div>
         </div>
diff --git a/packages/p2p-v2/src/components/Modals/NicknameModal/NicknameModal.tsx b/packages/p2p-v2/src/components/Modals/NicknameModal/NicknameModal.tsx
@@ -5,12 +5,18 @@ import Modal from 'react-modal';
 import { p2p } from '@deriv/api';
 import { Button, Text } from '@deriv-com/ui';
 import { useDevice } from '../../../hooks';
+import { useSwitchTab } from '../../../hooks/useSwitchTab';
 import P2PUserIcon from '../../../public/ic-cashier-p2p-user.svg';
 import { Input } from '../../Input';
 import { customStyles } from '../helpers';
 import './NicknameModal.scss';
 
-const NicknameModal = () => {
+type TNicknameModalProps = {
+    isModalOpen: boolean | undefined;
+    setIsModalOpen: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+};
+
+const NicknameModal = ({ isModalOpen, setIsModalOpen }: TNicknameModalProps) => {
     const ReactModal = Modal as ComponentType<ReactModal['props']>;
     const {
         control,
@@ -24,14 +30,14 @@ const NicknameModal = () => {
         mode: 'onChange',
     });
 
-    const { error, isError, mutate, reset } = p2p.advertiser.useCreate();
+    const switchTab = useSwitchTab();
+    const { error, isError, isSuccess, mutate, reset } = p2p.advertiser.useCreate();
     const { isMobile } = useDevice();
     const textSize = isMobile ? 'md' : 'sm';
     const debouncedReset = debounce(reset, 3000);
 
     const onSubmit = () => {
         mutate({ name: getValues('nickname') });
-        debouncedReset();
     };
 
     const errorMessage = error?.error?.message || 'Can only contain letters, numbers, and special characters .-_@.';
@@ -42,16 +48,16 @@ const NicknameModal = () => {
         Modal.setAppElement('#v2_modal_root');
     }, []);
 
+    useEffect(() => {
+        if (isSuccess) {
+            setIsModalOpen(false);
+        } else if (isError) {
+            debouncedReset();
+        }
+    }, [isError, isSuccess]);
+
     return (
-        <ReactModal
-            className='p2p-v2-nickname-modal'
-            isOpen={true}
-            onRequestClose={() => {
-                // Implement return function here
-            }}
-            shouldCloseOnOverlayClick
-            style={customStyles}
-        >
+        <ReactModal className='p2p-v2-nickname-modal' isOpen={!!isModalOpen} style={customStyles}>
             <form className='p2p-v2-nickname-modal__form' onSubmit={handleSubmit(onSubmit)}>
                 <P2PUserIcon />
                 <Text className='p2p-v2-nickname-modal__form-title' weight='bold'>
@@ -72,12 +78,21 @@ const NicknameModal = () => {
                     Your nickname cannot be changed later.
                 </Text>
                 <div className='p2p-v2-nickname-modal__form__button-group'>
-                    <Button className='p2p-v2-nickname-modal__form__button-group__cancel' size='lg' variant='outlined'>
+                    <Button
+                        className='p2p-v2-nickname-modal__form__button-group__cancel'
+                        onClick={() => {
+                            switchTab('buy-sell');
+                            setIsModalOpen(false);
+                        }}
+                        size='lg'
+                        type='button'
+                        variant='outlined'
+                    >
                         <Text size={textSize} weight='bold'>
                             Cancel
                         </Text>
                     </Button>
-                    <Button disabled={watchNickname === '' || hasError} size='lg'>
+                    <Button disabled={watchNickname === '' || hasError} size='lg' type='submit'>
                         <Text color='white' size={textSize} weight='bold'>
                             Confirm
                         </Text>
diff --git a/packages/p2p-v2/src/components/Verification/Verification.scss b/packages/p2p-v2/src/components/Verification/Verification.scss
@@ -2,19 +2,20 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding-top: 6.8rem;
-    width: 100%;
+    margin-top: 4rem;
+    width: 67.2rem;
 
     @include mobile {
+        margin-top: 2rem;
         padding: 2.4rem;
+        width: 100%;
     }
 
     &__text {
         margin-bottom: 1.6rem;
     }
 
     &__icon {
-        height: 12.8rem;
-        width: 12.8rem;
+        margin-bottom: 3rem;
     }
 }
diff --git a/packages/p2p-v2/src/components/Verification/Verification.tsx b/packages/p2p-v2/src/components/Verification/Verification.tsx
@@ -56,19 +56,19 @@ const Verification = () => {
         {
             isDisabled: isPoiPending,
             onClick: () => {
-                if (!isPoaVerified) redirectToVerification('/account/proof-of-identity');
+                if (!isPoiVerified) redirectToVerification('/account/proof-of-identity');
             },
-            status: isPoaVerified ? 'done' : 'action',
+            status: isPoiVerified ? 'done' : 'action',
             text: getPoiAction(poiStatus),
         },
         ...(isP2PPoaRequired
             ? [
                   {
                       isDisabled: isPoaPending,
                       onClick: () => {
-                          if (!isPoiVerified) redirectToVerification('/account/proof-of-address');
+                          if (!isPoaVerified) redirectToVerification('/account/proof-of-address');
                       },
-                      status: isPoiVerified ? 'done' : 'action',
+                      status: isPoaVerified ? 'done' : 'action',
                       text: getPoaAction(poaStatus),
                   },
               ]
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
@@ -1,6 +1,8 @@
-import React from 'react';
-import { Tab, Tabs } from '@deriv-com/ui';
-import { useDevice, useQueryString } from '../../../../hooks';
+import React, { useEffect, useState } from 'react';
+import { Loader, Tab, Tabs } from '@deriv-com/ui';
+import { NicknameModal } from '../../../../components/Modals/NicknameModal';
+import { Verification } from '../../../../components/Verification';
+import { useAdvertiserStats, useDevice, usePoiPoaStatus, useQueryString } from '../../../../hooks';
 import { MyProfileAdDetails } from '../MyProfileAdDetails';
 import { MyProfileContent } from '../MyProfileContent';
 import { MyProfileCounterparties } from '../MyProfileCounterparties';
@@ -14,13 +16,31 @@ const TABS = ['Stats', 'Payment methods', 'Ad details', 'My counterparties'];
 const MyProfile = () => {
     const { isMobile } = useDevice();
     const { queryString, setQueryString } = useQueryString();
+    const { data } = usePoiPoaStatus();
+    const { data: advertiserStats, failureReason, isLoading } = useAdvertiserStats();
+    const { isP2PPoaRequired, isPoaVerified, isPoiVerified } = data || {};
+    const [isNicknameModalOpen, setIsNicknameModalOpen] = useState<boolean | undefined>(false);
 
     const currentTab = queryString.get('tab');
 
+    useEffect(() => {
+        const isPoaPoiVerified = (!isP2PPoaRequired || isPoaVerified) && isPoiVerified;
+        if (isPoaPoiVerified && !!failureReason) setIsNicknameModalOpen(true);
+    }, [failureReason, isP2PPoaRequired, isPoaVerified, isPoiVerified]);
+
+    if (isLoading && !advertiserStats) {
+        return <Loader />;
+    }
+
+    if (!isPoiVerified || !isPoaVerified) {
+        return <Verification />;
+    }
+
     if (isMobile) {
         return (
             <div className='p2p-v2-my-profile'>
                 <MyProfileMobile />
+                <NicknameModal isModalOpen={isNicknameModalOpen} setIsModalOpen={setIsNicknameModalOpen} />
             </div>
         );
     }
@@ -51,6 +71,7 @@ const MyProfile = () => {
                     <MyProfileCounterparties />
                 </Tab>
             </Tabs>
+            <NicknameModal isModalOpen={isNicknameModalOpen} setIsModalOpen={setIsNicknameModalOpen} />
         </div>
     );
 };
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileBalance/MyProfileBalance.scss b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileBalance/MyProfileBalance.scss
@@ -13,6 +13,10 @@
         flex-direction: column;
         gap: 1rem;
 
+        @include mobile {
+            gap: 0;
+        }
+
         & div {
             display: flex;
             align-items: center;
@@ -47,6 +51,8 @@
 
         @include mobile {
             border-right: 1px solid #f2f3f7;
+            gap: 1rem;
+
             &:last-child {
                 border-right: none;
                 padding: 0 1.6rem;
@@ -60,6 +66,7 @@
             @include mobile {
                 grid-template-columns: 1fr;
                 grid-template-rows: 1fr 1fr;
+                gap: 0.8rem;
             }
 
             & div {
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileBalance/MyProfileBalance.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileBalance/MyProfileBalance.tsx
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileContent/MyProfileContent.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileContent/MyProfileContent.tsx

Original file line number	Diff line number	Diff line change
`@@ -2,19 +2,20 @@`
`2`	`2`	`display: flex;`
`3`	`3`	`flex-direction: column;`
`4`	`4`	`align-items: center;`
`5`		`- padding-top: 6.8rem;`
`6`		`- width: 100%;`
	`5`	`+ margin-top: 4rem;`
	`6`	`+ width: 67.2rem;`
`7`	`7`
`8`	`8`	`@include mobile {`
	`9`	`+ margin-top: 2rem;`
`9`	`10`	`padding: 2.4rem;`
	`11`	`+ width: 100%;`
`10`	`12`	`}`
`11`	`13`
`12`	`14`	`&__text {`
`13`	`15`	`margin-bottom: 1.6rem;`
`14`	`16`	`}`
`15`	`17`
`16`	`18`	`&__icon {`
`17`		`- height: 12.8rem;`
`18`		`- width: 12.8rem;`
	`19`	`+ margin-bottom: 3rem;`
`19`	`20`	`}`
`20`	`21`	`}`