Skip to content

Commit

Permalink
Telegram bot api integration have been done
Browse files Browse the repository at this point in the history
  • Loading branch information
@kapildave07
kapildave07 committed Jun 4, 2024
1 parent 98d495d commit a62ddea
Show file tree
Hide file tree
Showing 4 changed files with 133 additions and 50 deletions.
6 changes: 3 additions & 3 deletions src/pages/KYC/IndividualKycFormV2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import { FormCard, FormGrid, FormWrapper, StyledStickyBox } from './styleds'
import { businessEmailSchema, individualErrorsSchemaV2 } from './schema'
import { Line } from 'components/Line'
import VerificationConfirmation from './VerificationConfirmation'
import { SecondaryContactTypeV2 } from './enum'
import { SecondaryContactTypeV2, SuccessType } from './enum'
import SecondaryContactOption from './SecondaryContactOption'
export const FormRow = styled(Row)`
align-items: flex-start;
Expand Down Expand Up @@ -177,9 +177,9 @@ export default function IndividualKycFormV2() {
}

const handleSuccess = (section: string) => {
if (section === 'personal') {
if (section === SuccessType.PERSONAL) {
setIsPersonalVerified(true)
} else if (section === 'businessEmail') {
} else if (section === SuccessType.BUSINESS) {
setIsBusinessEmailVerified(true)
}
}
Expand Down
163 changes: 122 additions & 41 deletions src/pages/KYC/SecondaryContactOption.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,13 @@ import {
useResendEmail,
useGenerateSecondaryEmailVerifyCode,
useVerifySecondaryEmailCode,
useVerifySocialAccountCode,
useSocialAccountVerificationStatus,
} from 'state/kyc/hooks'
import { PinnedContentButton } from 'components/Button'
import { isMobile } from 'react-device-detect'
import { EmailType, SuccessType } from './enum'
import { TYPE } from 'theme'
import { ReactComponent as CopyIcon } from 'assets/images/copy.svg'

interface Props {
verificationSecation?: string
Expand Down Expand Up @@ -50,6 +52,7 @@ const SecondaryContactOption: React.FC<Props> = ({
const [resetCodeInput, setResetCodeInput] = useState(false)
const [buttonText, setButtonText] = useState('Send Code')
const [initialEmail, setInitialEmail] = useState(personalInfo?.email || '')
const [socialAccountOTP, SetsocialAccountOTP] = useState()
console.log(isVerifiedPersonalInfo, isVerifiedBusinessEmail, 'isVerifiedPersonalInfo', 'isVerifiedBusinessEmail')

useEffect(() => {
Expand Down Expand Up @@ -87,9 +90,12 @@ const SecondaryContactOption: React.FC<Props> = ({
}

const sendSecondaryEmailVerification = async () => {
console.log(emailType, businessEmail, 'test')
if (!emailType) throw new Error('Email type or business email is missing')
return await generateSecondaryEmailVerifyCode(emailType, businessEmail)
const response = await generateSecondaryEmailVerifyCode(emailType, businessEmail)
if (emailType === EmailType.SOCIAL_ACCOUNT) {
SetsocialAccountOTP(response?.response?.data?.otp)
}
return response
}

const handleSuccess = () => {
Expand Down Expand Up @@ -131,10 +137,22 @@ const SecondaryContactOption: React.FC<Props> = ({
<EmailVerificationContainer>
<ContentContainer>
<ModalContent>
<Title>Enter the code</Title>
<SubTitle>
A 6-digit verification code has been sent to your email. Enter the code below to verify your email.
</SubTitle>
{emailType === EmailType.SOCIAL_ACCOUNT ? (
<>
<SocialAccountTitle>Instruction</SocialAccountTitle>
<SocialAccountSubTitle>1. Open the Telegram App</SocialAccountSubTitle>
<SocialAccountSubTitle>2. Start a chat with @IXSbot</SocialAccountSubTitle>
<SocialAccountSubTitle>3. Get Verification Code</SocialAccountSubTitle>
</>
) : (
<>
<Title>Enter the code</Title>
<SubTitle>
A 6-digit verification code has been sent to your email. Enter the code below to verify your email.
</SubTitle>
</>
)}

<CodeInput
error={error}
key={resetCodeInput}
Expand All @@ -149,6 +167,7 @@ const SecondaryContactOption: React.FC<Props> = ({
isVerifiedBusinessEmail={isVerifiedBusinessEmail}
emailType={emailType}
verificationSecation={verificationSecation}
socialAccountOTP={socialAccountOTP}
/>
<TimerContainer>
{timer > 0 ? (
Expand Down Expand Up @@ -179,12 +198,13 @@ const CodeInput: React.FC<any> = ({
isVerifiedBusinessEmail,
emailType,
verificationSecation,
socialAccountOTP,
}) => {
const inputRefs = useRef<HTMLInputElement[]>([])
const [code, setCode] = useState(Array(numberOfBoxes).fill(''))
const verifyIndividualCode = useVerifyIndividualCode()
const verifySecondaryEmailCode = useVerifySecondaryEmailCode()
const verifySocialAccountCode = useVerifySocialAccountCode()
const verifySocialAccountCode = useSocialAccountVerificationStatus()
const addPopup = useAddPopup()
const [verifyError, setVerifyError] = useState(false)

Expand All @@ -206,16 +226,12 @@ const CodeInput: React.FC<any> = ({

const handleVerifyCode = async () => {
const verificationCode = code.join('')

try {
let result
if (isVerifiedPersonalInfo && !isVerifiedBusinessEmail && verificationSecation === 'Telegram') {
result = await verifySocialAccountCode(verificationCode)
} else {
result =
!isVerifiedPersonalInfo && !isVerifiedBusinessEmail
? await verifyIndividualCode(verificationCode)
: await verifySecondaryEmailCode(verificationCode)
}
const verifyCode =
!isVerifiedPersonalInfo && !isVerifiedBusinessEmail ? verifyIndividualCode : verifySecondaryEmailCode

const result = await verifyCode(verificationCode)

if (result.success) {
handleVerificationSuccess()
Expand Down Expand Up @@ -250,33 +266,73 @@ const CodeInput: React.FC<any> = ({
handleVerifyCode()
}
}

const handleCopyClick = async () => {
navigator.clipboard.writeText(socialAccountOTP)
addPopup({ info: { success: true, summary: 'Code copied to clipboard!' } })
const interval = setInterval(async () => {
const result = await verifySocialAccountCode()
if (result.status === 1) {
clearInterval(interval)
handleVerificationSuccess()
}
}, 5000)
}

return (
<CodeInputContainer key={reset}>
<CodeRow>
{code.map((_, index) => (
<CodeBox
key={index}
placeholder="0"
value={code[index]}
onChange={(e) => handleCodeChange(index, e.target.value)}
borderColor={verifyError ? '#FF6D6D80' : '#E6E6FF'}
backgroundColor={verifyError ? '#F8E9EC' : '#F7F7FA'}
color={verifyError ? '#FF6D6D' : '#292933'}
placeholderColor={verifyError ? '#FF6D6D' : '#B8B8CC'}
ref={(el) => {
if (el) {
inputRefs.current[index] = el as HTMLInputElement
}
}}
/>
))}
</CodeRow>
<PinnedContentButton disabled={error} onClick={handleButtonClick}>
{buttonText}
</PinnedContentButton>
</CodeInputContainer>
<>
<CodeInputContainer key={reset}>
{emailType === EmailType.SOCIAL_ACCOUNT ? (
''
) : (
<CodeRow>
{code.map((_, index) => (
<CodeBox
key={index}
placeholder="0"
value={code[index]}
onChange={(e) => handleCodeChange(index, e.target.value)}
borderColor={verifyError ? '#FF6D6D80' : '#E6E6FF'}
backgroundColor={verifyError ? '#F8E9EC' : '#F7F7FA'}
color={verifyError ? '#FF6D6D' : '#292933'}
placeholderColor={verifyError ? '#FF6D6D' : '#B8B8CC'}
ref={(el) => {
if (el) {
inputRefs.current[index] = el as HTMLInputElement
}
}}
/>
))}
</CodeRow>
)}

{socialAccountOTP ? (
<Container>
<TYPE.title7>{socialAccountOTP}</TYPE.title7>
<CopyIcon style={{ width: '30px', height: '18px', cursor: 'pointer' }} onClick={handleCopyClick} />
</Container>
) : (
<PinnedContentButton disabled={error} onClick={handleButtonClick}>
{buttonText}
</PinnedContentButton>
)}
</CodeInputContainer>
{emailType === EmailType.SOCIAL_ACCOUNT && (
<SocialAccountSubTitle style={{ marginTop: '20px' }}>4. Send the code to the Bot</SocialAccountSubTitle>
)}
</>
)
}
const Container = styled.div`
background: #ffffff;
border: 1px solid #e6e6ff;
padding: 24px 16px;
width: 100%;
display: flex;
justify-content: space-between;
place-items: center;
border-radius: 8px;
`

const EmailVerificationContainer = styled.div`
background: #f7f7fa;
Expand Down Expand Up @@ -313,6 +369,18 @@ const Title = styled.div`
}
`

const SocialAccountTitle = styled.div`
font-weight: 600;
font-size: 20px;
text-align: left;
color: #292933;
margin-top: 20px;
@media (max-width: 768px) {
font-size: 13px;
margin-top: 20px;
}
`

const SubTitle = styled.div`
font-weight: 400;
font-size: 14px;
Expand All @@ -326,6 +394,19 @@ const SubTitle = styled.div`
}
`

const SocialAccountSubTitle = styled.div`
font-weight: 400;
font-size: 14px;
text-align: left;
color: #666680;
margin: 10px 0px;
line-height: 20px;
@media (max-width: 768px) {
font-size: 13px;
margin-top: 10px;
}
`

const ErrorText = styled.div`
color: red;
font-size: 12px;
Expand Down
2 changes: 2 additions & 0 deletions src/pages/KYC/enum.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,13 @@ export enum SecondaryContactType {
export enum EmailType {
PRIMARY = 'primary_email',
SECONDARY = 'secondary_email',
SOCIAL_ACCOUNT = 'social_account'
}

export enum SuccessType {
PERSONAL = 'personal',
BUSINESS = 'businessEmail',

}

export enum SecondaryContactTypeV2 {
Expand Down
12 changes: 6 additions & 6 deletions src/state/kyc/hooks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,19 +159,19 @@ export const useVerifySecondaryEmailCode = () => {
}, [])
}

export const useVerifySocialAccountCode = () => {
return React.useCallback(async (otp: string) => {
export const useSocialAccountVerificationStatus = () => {
return React.useCallback(async () => {
try {
const response = await apiService.put(`/kyc/individual/verifySocialAccount`, { otp })
const response = await apiService.get(`/kyc/individual/socialAccountVerificationStatus`)
console.log(response)
return { success: true, response }
} catch (error: any) {
const { status } = response.data
return { success: true, status }
} catch (error) {
console.error(error)
return { success: false, error }
}
}, [])
}

export const useVerifyIdentity = () => {
return React.useCallback(async () => {
try {
Expand Down

0 comments on commit a62ddea

Please sign in to comment.