✨ Add WhatsApp integration beta test (#722)

Related to #401

apps/builder/src/features/account/UserProvider.tsx

@@ -8,6 +8,7 @@ import { useToast } from '@/hooks/useToast'
 import { updateUserQuery } from './queries/updateUserQuery'
 import { useDebouncedCallback } from 'use-debounce'
 import { env } from '@typebot.io/env'
+import { identifyUser } from '../telemetry/posthog'
 
 export const userContext = createContext<{
   user?: User
@@ -37,7 +38,11 @@ export const UserProvider = ({ children }: { children: ReactNode }) => {
     )
     const parsedUser = session.user as User
     setUser(parsedUser)
-    if (parsedUser?.id) setSentryUser({ id: parsedUser.id })
+
+    if (parsedUser?.id) {
+      setSentryUser({ id: parsedUser.id })
+      identifyUser(parsedUser.id)
+    }
   }, [session, user])
 
   useEffect(() => {

apps/builder/src/features/account/components/ApiTokensModal.tsx

@@ -0,0 +1,32 @@
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react'
+import { ApiTokensList } from './ApiTokensList'
+import { useUser } from '../hooks/useUser'
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+}
+export const ApiTokensModal = ({ isOpen, onClose }: Props) => {
+  const { user } = useUser()
+
+  if (!user) return
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="xl">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader />
+        <ModalBody>
+          <ApiTokensList user={user} />
+        </ModalBody>
+        <ModalFooter />
+      </ModalContent>
+    </Modal>
+  )
+}

apps/builder/src/features/account/components/CreateTokenModal.tsx

@@ -15,7 +15,7 @@ import {
   InputGroup,
   InputRightElement,
 } from '@chakra-ui/react'
-import React, { FormEvent, useState } from 'react'
+import React, { FormEvent, useRef, useState } from 'react'
 import { createApiTokenQuery } from '../queries/createApiTokenQuery'
 import { ApiTokenFromServer } from '../types'
 
@@ -32,6 +32,7 @@ export const CreateTokenModal = ({
   onClose,
   onNewToken,
 }: Props) => {
+  const inputRef = useRef<HTMLInputElement>(null)
   const scopedT = useScopedI18n('account.apiTokens.createModal')
   const [name, setName] = useState('')
   const [isSubmitting, setIsSubmitting] = useState(false)
@@ -47,8 +48,9 @@ export const CreateTokenModal = ({
     }
     setIsSubmitting(false)
   }
+
   return (
-    <Modal isOpen={isOpen} onClose={onClose}>
+    <Modal isOpen={isOpen} onClose={onClose} initialFocusRef={inputRef}>
       <ModalOverlay />
       <ModalContent>
         <ModalHeader>
@@ -58,7 +60,7 @@ export const CreateTokenModal = ({
         {newTokenValue ? (
           <ModalBody as={Stack} spacing="4">
             <Text>
-              {scopedT('copyInstruction')}
+              {scopedT('copyInstruction')}{' '}
               <strong>{scopedT('securityWarning')}</strong>
             </Text>
             <InputGroup size="md">
@@ -72,6 +74,7 @@ export const CreateTokenModal = ({
           <ModalBody as="form" onSubmit={createToken}>
             <Text mb="4">{scopedT('nameInput.label')}</Text>
             <Input
+              ref={inputRef}
               placeholder={scopedT('nameInput.placeholder')}
               onChange={(e) => setName(e.target.value)}
             />