[FEQ] / Ameerul / FEQ-1302 Create the verification component (#12945)

* feat: added verification component, new hook usePoiPoaStatus

* chore: added page-return component and fixed styling issues

* chore: empty commit

* fix: sonarcloud issues

* chore: removed key as key, added item.text for key

* chore: refactored poipoa hook, removed constants

* chore: added deriv ui components

* feat: added advertiser entity

* fix: styling issues

* chore: removed empty tag

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

@@ -0,0 +1,59 @@
+@mixin icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 3.2rem;
+    height: 3.2rem;
+}
+
+.p2p-v2-checklist {
+    display: flex;
+    flex-direction: column;
+    margin-top: 2.4rem;
+
+    @include mobile {
+        width: 100%;
+    }
+
+    & span {
+        max-width: 80%;
+    }
+
+    &__item {
+        padding: 1.6rem;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        box-shadow: 0px -1px 0px 0px #f2f3f4 inset;
+        width: 41rem;
+
+        @include mobile {
+            width: 100%;
+        }
+
+        &-button {
+            @include icon-wrapper;
+
+            padding: 0;
+
+            &--disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+
+            &-icon {
+                fill: #fff;
+                transform: scale(1.4);
+            }
+        }
+
+        &-checkmark {
+            @include icon-wrapper;
+
+            &-icon {
+                fill: #4bb4b3;
+                transform: scale(0.7);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Button } from '@deriv-com/ui/dist/components/Button';
+import { Text } from '@deriv-com/ui/dist/components/Text';
+import { useDevice } from '../../hooks';
+import ArrowRightIcon from '../../public/ic-arrow-right.svg';
+import CheckmarkIcon from '../../public/ic-checkmark.svg';
+import './Checklist.scss';
+
+type TChecklistItem = {
+    isDisabled?: boolean;
+    onClick?: () => void;
+    status: string;
+    text: string;
+};
+
+const Checklist = ({ items }: { items: TChecklistItem[] }) => {
+    const { isMobile } = useDevice();
+    return (
+        <div className='p2p-v2-checklist'>
+            {items.map(item => (
+                <div className='p2p-v2-checklist__item' key={item.text}>
+                    <Text color={item.isDisabled ? 'less-prominent' : 'general'} size={isMobile ? 'md' : 'sm'}>
+                        {item.text}
+                    </Text>
+                    {item.status === 'done' ? (
+                        <div className='p2p-v2-checklist__item-checkmark'>
+                            <CheckmarkIcon className='p2p-v2-checklist__item-checkmark-icon' />
+                        </div>
+                    ) : (
+                        <Button
+                            className='p2p-v2-checklist__item-button'
+                            disabled={item.isDisabled}
+                            icon={<ArrowRightIcon className='p2p-v2-checklist__item-button-icon' />}
+                            onClick={item.onClick}
+                        />
+                    )}
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default Checklist;

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

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

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

@@ -0,0 +1,24 @@
+.p2p-v2-page-return {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 2.4rem 0;
+    font-size: 16px;
+    font-weight: 700;
+    width: 100%;
+
+    @include mobile {
+        margin: 0;
+        padding: 1.6rem;
+    }
+
+    &__button {
+        line-height: 0.8rem;
+        cursor: pointer;
+        margin-right: 0.8rem;
+
+        @include mobile {
+            margin-right: 1.8rem;
+        }
+    }
+}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Text } from '@deriv-com/ui/dist/components/Text';
+import ArrowLeftIcon from '../../public/ic-arrow-left.svg';
+import './PageReturn.scss';
+
+type TPageReturnProps = {
+    className?: string;
+    onClick: () => void;
+    pageTitle: string;
+};
+
+const PageReturn = ({ className = '', onClick, pageTitle }: TPageReturnProps) => {
+    return (
+        <div className={clsx('p2p-v2-page-return', className)}>
+            <ArrowLeftIcon className='p2p-v2-page-return__button' onClick={onClick} />
+            <Text>{pageTitle}</Text>
+        </div>
+    );
+};
+
+export default PageReturn;

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

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

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

@@ -0,0 +1,20 @@
+.p2p-v2-verification {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 6.8rem;
+    width: 100%;
+
+    @include mobile {
+        padding: 2.4rem;
+    }
+
+    &__text {
+        margin-bottom: 1.6rem;
+    }
+
+    &__icon {
+        height: 12.8rem;
+        width: 12.8rem;
+    }
+}

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

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Loader } from '@deriv-com/ui/dist/components/Loader';
+import { Text } from '@deriv-com/ui/dist/components/Text';
+import { useHistory } from 'react-router-dom';
+import { useDevice, usePoiPoaStatus } from '../../hooks';
+import SendEmailIcon from '../../public/ic-send-email.svg';
+import { Checklist } from '../Checklist';
+import './Verification.scss';
+
+const getPoiAction = (status: string | undefined) => {
+    switch (status) {
+        case 'pending':
+            return 'Identity verification in progress.';
+        case 'rejected':
+            return 'Identity verification failed. Please try again.';
+        case 'verified':
+            return 'Identity verification complete.';
+        default:
+            return 'Upload documents to verify your identity.';
+    }
+};
+
+const getPoaAction = (status: string | undefined) => {
+    switch (status) {
+        case 'pending':
+            return 'Address verification in progress.';
+        case 'rejected':
+            return 'Address verification failed. Please try again.';
+        case 'verified':
+            return 'Address verification complete.';
+        default:
+            return 'Upload documents to verify your address.';
+    }
+};
+
+const Verification = () => {
+    const { isMobile } = useDevice();
+    const history = useHistory();
+    const { data, isLoading } = usePoiPoaStatus();
+    const { isP2PPoaRequired, isPoaPending, isPoaVerified, isPoiPending, isPoiVerified, poaStatus, poiStatus } =
+        data || {};
+
+    const redirectToVerification = (route: string) => {
+        const search = window.location.search;
+        let updatedUrl = `${route}?ext_platform_url=/cashier/p2p`;
+
+        if (search) {
+            const urlParams = new URLSearchParams(search);
+            const updatedUrlParams = new URLSearchParams(updatedUrl);
+            urlParams.forEach((value, key) => updatedUrlParams.append(key, value));
+            updatedUrl = `${updatedUrl}&${urlParams.toString()}`;
+        }
+        history.push(updatedUrl);
+    };
+
+    const checklistItems = [
+        {
+            isDisabled: isPoiPending,
+            onClick: () => {
+                if (!isPoaVerified) redirectToVerification('/account/proof-of-identity');
+            },
+            status: isPoaVerified ? 'done' : 'action',
+            text: getPoiAction(poiStatus),
+        },
+        ...(isP2PPoaRequired
+            ? [
+                  {
+                      isDisabled: isPoaPending,
+                      onClick: () => {
+                          if (!isPoiVerified) redirectToVerification('/account/proof-of-address');
+                      },
+                      status: isPoiVerified ? 'done' : 'action',
+                      text: getPoaAction(poaStatus),
+                  },
+              ]
+            : []),
+    ];
+
+    if (isLoading) return <Loader />;
+
+    return (
+        <div className='p2p-v2-verification'>
+            <SendEmailIcon className='p2p-v2-verification__icon' />
+            <Text className='p2p-v2-verification__text' size={isMobile ? 'lg' : 'md'} weight='bold'>
+                Verify your P2P account
+            </Text>
+            <Text align='center' className='p2p-v2-verification__text' size={isMobile ? 'lg' : 'md'}>
+                Verify your identity and address to use Deriv P2P.
+            </Text>
+            <Checklist items={checklistItems} />
+        </div>
+    );
+};
+
+export default Verification;

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

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

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

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

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

@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+import { useGetAccountStatus } from '@deriv/api';
+
+/** A custom hook that returns the POA, POI status and if POA is required for P2P */
+const usePoiPoaStatus = () => {
+    const { data, ...rest } = useGetAccountStatus();
+
+    // create new response for poi/poa statuses
+    const modifiedAccountStatus = useMemo(() => {
+        if (!data) return undefined;
+
+        const documentStatus = data?.authentication?.document?.status;
+        const identityStatus = data?.authentication?.identity?.status;
+
+        return {
+            isP2PPoaRequired: data?.p2p_poa_required,
+            isPoaPending: documentStatus === 'pending',
+            isPoaVerified: documentStatus === 'verified',
+            isPoiPending: identityStatus === 'pending',
+            isPoiVerified: identityStatus === 'verified',
+            poaStatus: documentStatus,
+            poiStatus: identityStatus,
+        };
+    }, [data]);
+
+    return {
+        /** The POI & POA status. */
+        data: modifiedAccountStatus,
+        ...rest,
+    };
+};
+
+export default usePoiPoaStatus;