now use twitter + email only

src/components/InviteCode/EmailInviteCard.tsx → src/components/InviteCode/InviteCard.tsx

@@ -1,20 +1,15 @@
 import { HeaderText } from '../Text'
 import { MjmlSpacer, MjmlText } from 'mjml-react'
+import { TokenProps } from '../../layouts/inviteCode'
 import Button from '../Button'
 import Card from '../Card'
+import TwitterBlock from './TwitterBlock'
 import colors from '../../styles/colors'
 import env from '../../env'
 import values from '../../styles/values'
 
-interface EmailInviteCardProps {
-  email: string
-  secret: string
-}
-
-export default function EmailInviteCard({
-  email,
-  secret,
-}: EmailInviteCardProps) {
+export default function InviteCard(props: TokenProps) {
+  const { attestationType, email, secret, twitterHandle } = props
   const domain = email.split('@')[1]
   const linkToKetlEmailVerification = `${env.KETL_ADDRESS}/email/${domain}/${secret}`
 
@@ -60,6 +55,12 @@ export default function EmailInviteCard({
         (<strong>DO NOT</strong> Screenshot or share your invite code with
         anyone else)
       </MjmlText>
+      {!!twitterHandle && (
+        <TwitterBlock
+          attestationType={attestationType}
+          twitterHandle={twitterHandle}
+        />
+      )}
     </Card>
   )
 }

src/components/InviteCode/TwitterBlock.tsx

@@ -0,0 +1,52 @@
+import { MjmlDivider, MjmlSpacer, MjmlText } from 'mjml-react'
+import AttestationType from '../../models/AttestationType'
+import VerificationType from '../../models/VerificationType'
+import colors from '../../styles/colors'
+import openKetlWaitlist from '../../helpers/openKetlWaitlist'
+import values from '../../styles/values'
+
+export default function TwitterBlock({
+  attestationType,
+  twitterHandle,
+}: {
+  attestationType: AttestationType
+  twitterHandle: string
+}) {
+  const ketlAppTwitterVerification = openKetlWaitlist({
+    attestationType,
+    passed: true,
+    value: twitterHandle,
+    verificationType: VerificationType.twitter,
+  })
+
+  return (
+    <>
+      <MjmlSpacer height={values.px24} />
+      <MjmlDivider borderColor={colors.tertiary} borderWidth={values.px} />
+      <MjmlSpacer height={values.px24} />
+      <MjmlText
+        align="center"
+        color={colors.tertiary}
+        fontSize={values.px14}
+        lineHeight={values.px16}
+        mjClass="font-primary"
+      >
+        You may also activate your ketl account using the X (twitter) account @
+        {twitterHandle}
+      </MjmlText>
+      <MjmlSpacer height={values.px16} />
+      <MjmlText
+        align="center"
+        color={colors.tertiaryDark}
+        fontSize={values.px14}
+        lineHeight={values.px16}
+        mjClass="font-primary"
+        textDecoration="underline"
+      >
+        <a href={ketlAppTwitterVerification} target="_blank">
+          Activate with X instead
+        </a>
+      </MjmlText>
+    </>
+  )
+}

src/layouts/inviteCode.tsx

@@ -11,27 +11,20 @@ import AnonymousHeader from '../components/AnonymousHeader'
 import AttestationType from '../models/AttestationType'
 import BodyCard from '../components/BodyCard'
 import CanTrustCodes from '../components/InviteCode/CanTrustCodes'
-import EmailInviteCard from '../components/InviteCode/EmailInviteCard'
 import Footer from '../components/Footer'
 import Head from '../components/Head'
 import Header from '../components/Header'
 import HowEmailsVerified from '../components/InviteCode/HowEmailsVerified'
-import TwitterInviteCard from '../components/InviteCode/TwitterInviteCard'
-import VerificationType from '../models/VerificationType'
+import InviteCard from '../components/InviteCode/InviteCard'
 import colors from '../styles/colors'
 import values from '../styles/values'
 
-type TokenProps<Verification extends VerificationType> =
-  Verification extends VerificationType.email
-    ? {
-        attestationType: AttestationType
-        secret: string
-        email: string
-      }
-    : {
-        attestationType: AttestationType
-        twitterHandle: string
-      }
+export interface TokenProps {
+  attestationType: AttestationType
+  secret: string
+  email: string
+  twitterHandle?: string
+}
 
 const headerText = (
   <>
@@ -40,11 +33,7 @@ const headerText = (
   </>
 )
 
-function generateTokenPage<Verification extends VerificationType>(
-  props: TokenProps<Verification>
-) {
-  const usedTwitter = 'twitterHandle' in props
-
+function generateTokenPage(props: TokenProps) {
   return (
     <Mjml>
       <Head
@@ -54,11 +43,7 @@ function generateTokenPage<Verification extends VerificationType>(
       <BodyCard>
         <Header headerText={headerText} />
 
-        {usedTwitter ? (
-          <TwitterInviteCard {...props} />
-        ) : (
-          <EmailInviteCard {...props} />
-        )}
+        <InviteCard {...props} />
 
         <MjmlSpacer height={values.px32} />
 
@@ -83,8 +68,8 @@ function generateTokenPage<Verification extends VerificationType>(
   )
 }
 
-export default function <Verification extends VerificationType>(
-  props: TokenProps<Verification>,
+export default function (
+  props: TokenProps,
   options: Mjml2HtmlOptions = {
     minify: false,
     validationLevel: 'soft',

src/server.ts

@@ -30,19 +30,13 @@ app.get('/waitlist', (_, res) => {
 })
 
 app.get('*', (_, res) => {
-  const twitterExample = inviteCode<VerificationType.twitter>({
-    attestationType,
-    twitterHandle: env.TEST_TWITTER_HANDLE,
-  })
-  const emailExample = inviteCode<VerificationType.email>({
+  const emailExample = inviteCode({
     attestationType,
     email: env.TEST_EMAIL,
     secret: exampleSecret,
+    twitterHandle: env.TEST_TWITTER_HANDLE,
   })
-  const { html } =
-    verificationType === VerificationType.twitter
-      ? twitterExample
-      : emailExample
+  const { html } = emailExample
 
   void sendTestEmail({ html })