kyberAI: remove require email (#2411)

KyberNetwork · Dec 7, 2023 · 8525fd4 · 8525fd4
1 parent cffb1c8
commit 8525fd4
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 129 deletions.
diff --git a/src/pages/TrueSightV2/pages/RegisterWhitelist/SubscribeForm.tsx b/src/pages/TrueSightV2/pages/RegisterWhitelist/SubscribeForm.tsx
@@ -1,6 +1,6 @@
 import { Trans, t } from '@lingui/macro'
 import debounce from 'lodash/debounce'
-import { FormEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { FormEvent, useCallback, useMemo, useRef, useState } from 'react'
 import { Text } from 'rebass'
 import { useLazyCheckReferralCodeQuery, useRequestWhiteListMutation } from 'services/kyberAISubscription'
 
@@ -11,19 +11,11 @@ import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useParsedQueryString from 'hooks/useParsedQueryString'
 import useTheme from 'hooks/useTheme'
 import { getErrorMessage, isReferrerCodeInvalid } from 'pages/TrueSightV2/utils'
-import { useSessionInfo } from 'state/authen/hooks'
-import { isEmailValid } from 'utils/string'
 
 import { FormWrapper, Input } from './styled'
 
-export default function EmailForm({
-  showVerify,
-}: {
-  showVerify: (email: string, code: string, showSuccess: boolean) => void
-}) {
-  const { userInfo } = useSessionInfo()
+export default function EmailForm() {
   const { mixpanelHandler } = useMixpanel()
-  const [inputEmail, setInputEmail] = useState(userInfo?.email || '')
   const qs = useParsedQueryString<{ referrer: string }>()
   const [referredByCode, setCode] = useState(qs.referrer || '')
   const [errorInput, setErrorInput] = useState({ email: '', referredByCode: '' })
@@ -49,28 +41,11 @@ export default function EmailForm({
     [checkReferalCode],
   )
 
-  useEffect(() => {
-    userInfo?.email && setInputEmail(userInfo?.email)
-  }, [userInfo?.email])
-
-  const validateInput = useCallback((value: string, required = false) => {
-    const isValid = isEmailValid(value)
-    const errMsg = t`Please input a valid email address`
-    const msg = (value.length && !isValid) || (required && !value.length) ? errMsg : ''
-    setErrorInput(prev => ({ ...prev, email: msg ? msg : '' }))
-  }, [])
-
   const debouncedCheckReferCode = useMemo(
     () => debounce((code: string) => checkReferCodeExist(code), 500),
     [checkReferCodeExist],
   )
 
-  const onChangeInput = (e: React.FormEvent<HTMLInputElement>) => {
-    const value = e.currentTarget.value
-    setInputEmail(value)
-    validateInput(value)
-  }
-
   const onChangeCode = (e: FormEvent<HTMLInputElement>) => {
     checkingInput.current = true
     const value = e.currentTarget.value
@@ -84,11 +59,8 @@ export default function EmailForm({
   const joinWaitList = async () => {
     mixpanelHandler(MIXPANEL_TYPE.KYBERAI_JOIN_KYBER_WAITLIST_CLICK)
     try {
-      if (hasErrorInput || !inputEmail || checkingInput.current) return
-      if (userInfo?.email) {
-        await requestWaitList({ referredByCode }).unwrap()
-      }
-      showVerify(inputEmail || userInfo?.email || '', referredByCode, !!userInfo?.email)
+      if (hasErrorInput || checkingInput.current) return
+      requestWaitList({ referredByCode }).unwrap()
     } catch (error) {
       const msg = getErrorMessage(error)
       setErrorInput(prev => ({ ...prev, [isReferrerCodeInvalid(error) ? 'referredByCode' : 'email']: msg }))
@@ -98,21 +70,6 @@ export default function EmailForm({
   return (
     <>
       <FormWrapper>
-        <Column width="100%" gap="6px">
-          <Tooltip text={errorInput.email} show={!!errorInput.email} placement="top">
-            <Input
-              disabled={!!userInfo?.email}
-              $borderColor={errorInput.email ? theme.red : theme.border}
-              value={inputEmail}
-              placeholder={t`Email Address`}
-              onChange={onChangeInput}
-            />
-          </Tooltip>
-          <Text fontSize={10} color={theme.subText}>
-            <Trans>We will never share your email with third parties.</Trans>
-          </Text>
-        </Column>
-
         <Column width="100%" gap="6px">
           <Tooltip text={errorInput.referredByCode} show={!!errorInput.referredByCode} placement="top">
             <Input

diff --git a/src/pages/TrueSightV2/pages/RegisterWhitelist/WaitListForm.tsx b/src/pages/TrueSightV2/pages/RegisterWhitelist/WaitListForm.tsx
@@ -52,12 +52,14 @@ export default function EmailForm({
     <Wrapper style={style}>
       {desc}
 
-      <Column gap="6px">
-        <Label style={{ color }}>
-          <Trans>Your Email</Trans>
-        </Label>
-        <Input $borderColor={theme.border} value={userInfo?.email} disabled />
-      </Column>
+      {userInfo?.email && (
+        <Column gap="6px">
+          <Label style={{ color }}>
+            <Trans>Your Email</Trans>
+          </Label>
+          <Input $borderColor={theme.border} value={userInfo?.email} disabled />
+        </Column>
+      )}
 
       <RowBetween gap="12px">
         <Column gap="6px" style={{ width: '70%' }}>

diff --git a/src/pages/TrueSightV2/pages/RegisterWhitelist/index.tsx b/src/pages/TrueSightV2/pages/RegisterWhitelist/index.tsx
@@ -1,18 +1,15 @@
-import { Trans, t } from '@lingui/macro'
-import { useState } from 'react'
+import { Trans } from '@lingui/macro'
 import { useNavigate } from 'react-router-dom'
 import { Text } from 'rebass'
-import { useRequestWhiteListMutation } from 'services/kyberAISubscription'
 import styled from 'styled-components'
 
-import { ButtonLight, ButtonPrimary } from 'components/Button'
+import { ButtonLight } from 'components/Button'
 import { APP_PATHS } from 'constants/index'
 import { MIXPANEL_TYPE, useMixpanelKyberAI } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import SignInForm from 'pages/TrueSightV2/pages/RegisterWhitelist/SignInForm'
 import SubscribeForm from 'pages/TrueSightV2/pages/RegisterWhitelist/SubscribeForm'
 import WaitListForm from 'pages/TrueSightV2/pages/RegisterWhitelist/WaitListForm'
-import VerifyCodeModal from 'pages/Verify/VerifyCodeModal'
 import { useSessionInfo } from 'state/authen/hooks'
 import { useIsWhiteListKyberAI } from 'state/user/hooks'
 
@@ -29,58 +26,6 @@ export default function RegisterWhitelist({ showForm = true }: { showForm?: bool
 
   const { isWhiteList, isWaitList, loading: isCheckingPermission } = useIsWhiteListKyberAI()
 
-  const [verifyModalState, setVerifyModalState] = useState({
-    isOpen: false,
-    email: '',
-    referredByCode: '',
-    showVerifySuccess: false,
-  })
-
-  const showVerify = (email: string, referredByCode: string, showVerifySuccess: boolean) => {
-    setVerifyModalState({ isOpen: true, referredByCode, email, showVerifySuccess })
-  }
-
-  const onDismiss = () => setVerifyModalState(state => ({ ...state, isOpen: false }))
-  const [requestWaitList] = useRequestWhiteListMutation()
-
-  const onVerifySuccess = async () => {
-    return requestWaitList({ referredByCode: verifyModalState.referredByCode }).unwrap()
-  }
-
-  const renderVerifyModal = () => (
-    <VerifyCodeModal
-      {...verifyModalState}
-      verifySuccessTitle={t`Successful Registered`}
-      onVerifySuccess={onVerifySuccess}
-      verifySuccessContent={
-        <>
-          <WaitListForm
-            labelColor={theme.text}
-            style={{ width: '100%' }}
-            desc={
-              <Text fontSize={14} color={theme.text} lineHeight={'16px'} style={{ lineHeight: '18px' }}>
-                <Trans>
-                  Thank you for registering your interest in the KyberAI Beta Program. Follow us on our social channels
-                  to get regular updates on KyberAI
-                </Trans>
-              </Text>
-            }
-          />
-          <ButtonPrimary
-            height={'36px'}
-            onClick={() => {
-              mixpanelHandler(MIXPANEL_TYPE.KYBERAI_AWESOME_CLICK)
-              onDismiss()
-            }}
-          >
-            <Trans>Awesome</Trans>
-          </ButtonPrimary>
-        </>
-      }
-      onDismiss={onDismiss}
-    />
-  )
-
   if (isCheckingPermission)
     return (
       <ConnectWalletButton disabled>
@@ -127,25 +72,17 @@ export default function RegisterWhitelist({ showForm = true }: { showForm?: bool
     )
   if (isWaitList)
     return (
-      <>
-        <WaitListForm
-          desc={
-            <Text fontSize={12} color={theme.subText} lineHeight={'16px'}>
-              <Trans>
-                Hey! You&apos;re on our waitlist but your slot hasn&apos;t opened up yet. Jump the queue by referring
-                others to KyberAI.
-              </Trans>
-            </Text>
-          }
-        />
-        {renderVerifyModal()}
-      </>
+      <WaitListForm
+        desc={
+          <Text fontSize={12} color={theme.subText} lineHeight={'16px'}>
+            <Trans>
+              Hey! You&apos;re on our waitlist but your slot hasn&apos;t opened up yet. Jump the queue by referring
+              others to KyberAI.
+            </Trans>
+          </Text>
+        }
+      />
     )
 
-  return (
-    <>
-      <SubscribeForm showVerify={showVerify} />
-      {renderVerifyModal()}
-    </>
-  )
+  return <SubscribeForm />
 }