import React, {FC, useState} from 'react'; import {Modal, Image} from 'react-native'; import useUser from '@contexts/user'; import ShareIcon from '@assets/svg/ShareIcon'; import InfoIcon from '@assets/svg/InfoIcon'; import SuccessIcon from '@assets/svg/SuccessSmall'; import ErrorIcon from '@assets/svg/ErrorSmall'; import { Overlay, Wrapper, Footer, FooterButton, FooterButtonLabelStyle, Title, SubTitle, Body, SharedSuccessfully, SharedSuccessfullyTitle, SharedSuccessfullySubTitle, SharedSuccessfullySubTitleWrapper, SharedUnSuccessfullyTitle, CredentialWrapper, CredentialName, CredentialStatusWrapper, CredentialStatus, } from '@styles/components/credential-request'; enum MODAL_DISPLAY_STATE { REQUEST = 1, SHARED = 2, SHARED_ERROR = 3, } const CredentialRequestModal: FC = () => { const {setCredentialRequests, credentialRequests, credentials} = useUser(); const [displayState, setDisplayState] = useState(MODAL_DISPLAY_STATE.REQUEST); const hide = () => setCredentialRequests(undefined); const credentialRequestsData = credentialRequests?.credentialRequirements?.map((c: any) => ({ ...c, availableInWallet: !!credentials?.find(d => d?.type[0] === c?.type[0]), })); const visible = credentialRequestsData?.length > 0; const shareableVCCount = credentialRequestsData?.filter( (c: any) => c?.availableInWallet, )?.length; return ( { setCredentialRequests(undefined); hide(); }} activeOpacity={1} /> {displayState === MODAL_DISPLAY_STATE.REQUEST && ( Credential request )} {displayState === MODAL_DISPLAY_STATE.REQUEST && ( Learnet is requesting below credentials for placement registration verification )} {(displayState === MODAL_DISPLAY_STATE.SHARED || displayState === MODAL_DISPLAY_STATE.SHARED_ERROR) && ( Shared successfully Aadhaar card successfully with {displayState === MODAL_DISPLAY_STATE.SHARED_ERROR && ( <> Please contact Learnet to submit the following documents: )} )} {(displayState === MODAL_DISPLAY_STATE.REQUEST || displayState === MODAL_DISPLAY_STATE.SHARED_ERROR) && credentialRequestsData?.length > 0 && credentialRequestsData?.map((c: any, index: number) => ( {c?.availableInWallet ? : } {c?.type[0]} In wallet ))} ); }; export default CredentialRequestModal;