134 lines
3.9 KiB
TypeScript
134 lines
3.9 KiB
TypeScript
import { TextInput } from '@/components/inputs'
|
|
import { useTypebot } from '@/features/editor/providers/TypebotProvider'
|
|
import { useToast } from '@/hooks/useToast'
|
|
import { trpc } from '@/lib/trpc'
|
|
import {
|
|
Alert,
|
|
AlertIcon,
|
|
Button,
|
|
HStack,
|
|
Link,
|
|
SlideFade,
|
|
Stack,
|
|
StackProps,
|
|
Text,
|
|
} from '@chakra-ui/react'
|
|
import { isEmpty } from '@typebot.io/lib'
|
|
import { FormEvent, useState } from 'react'
|
|
import {
|
|
getPhoneNumberFromLocalStorage,
|
|
setPhoneNumberInLocalStorage,
|
|
} from '../helpers/phoneNumberFromLocalStorage'
|
|
import { useEditor } from '@/features/editor/providers/EditorProvider'
|
|
import { BuoyIcon, ExternalLinkIcon } from '@/components/icons'
|
|
|
|
export const WhatsAppPreviewInstructions = (props: StackProps) => {
|
|
const { typebot, save } = useTypebot()
|
|
const { startPreviewAtGroup, startPreviewAtEvent } = useEditor()
|
|
const [phoneNumber, setPhoneNumber] = useState(
|
|
getPhoneNumberFromLocalStorage() ?? ''
|
|
)
|
|
const [isSendingMessage, setIsSendingMessage] = useState(false)
|
|
const [isMessageSent, setIsMessageSent] = useState(false)
|
|
const [hasMessageBeenSent, setHasMessageBeenSent] = useState(false)
|
|
|
|
const { showToast } = useToast()
|
|
const { mutate } = trpc.whatsApp.startWhatsAppPreview.useMutation({
|
|
onMutate: () => setIsSendingMessage(true),
|
|
onSettled: () => setIsSendingMessage(false),
|
|
onError: (error) => showToast({ description: error.message }),
|
|
onSuccess: async (data) => {
|
|
if (
|
|
data?.message === 'success' &&
|
|
phoneNumber !== getPhoneNumberFromLocalStorage()
|
|
)
|
|
setPhoneNumberInLocalStorage(phoneNumber)
|
|
setHasMessageBeenSent(true)
|
|
setIsMessageSent(true)
|
|
setTimeout(() => setIsMessageSent(false), 30000)
|
|
},
|
|
})
|
|
|
|
const sendWhatsAppPreviewStartMessage = async (e: FormEvent) => {
|
|
e.preventDefault()
|
|
if (!typebot) return
|
|
await save()
|
|
mutate({
|
|
to: phoneNumber,
|
|
typebotId: typebot.id,
|
|
startFrom: startPreviewAtGroup
|
|
? { type: 'group', groupId: startPreviewAtGroup }
|
|
: startPreviewAtEvent
|
|
? { type: 'event', eventId: startPreviewAtEvent }
|
|
: undefined,
|
|
})
|
|
}
|
|
|
|
return (
|
|
<Stack
|
|
as="form"
|
|
spacing={4}
|
|
overflowY="auto"
|
|
w="full"
|
|
px="1"
|
|
onSubmit={sendWhatsAppPreviewStartMessage}
|
|
{...props}
|
|
>
|
|
<HStack justifyContent="flex-end">
|
|
<Text fontSize="sm">Need help?</Text>
|
|
<Button
|
|
as={Link}
|
|
href="https://docs.typebot.io/deploy/whatsapp/overview"
|
|
leftIcon={<BuoyIcon />}
|
|
size="sm"
|
|
>
|
|
Check the docs
|
|
</Button>
|
|
</HStack>
|
|
<TextInput
|
|
label="Your phone number"
|
|
placeholder="+XXXXXXXXXXXX"
|
|
type="tel"
|
|
withVariableButton={false}
|
|
debounceTimeout={0}
|
|
defaultValue={phoneNumber}
|
|
onChange={setPhoneNumber}
|
|
/>
|
|
{!isMessageSent && (
|
|
<Button
|
|
isDisabled={isEmpty(phoneNumber) || isMessageSent}
|
|
isLoading={isSendingMessage}
|
|
type="submit"
|
|
colorScheme="blue"
|
|
>
|
|
{hasMessageBeenSent ? 'Restart' : 'Start'} the chat
|
|
</Button>
|
|
)}
|
|
<SlideFade offsetY="20px" in={isMessageSent} unmountOnExit>
|
|
<Stack>
|
|
<Button
|
|
as={Link}
|
|
href={`https://web.whatsapp.com/`}
|
|
isExternal
|
|
colorScheme="blue"
|
|
rightIcon={<ExternalLinkIcon />}
|
|
>
|
|
Open WhatsApp Web
|
|
</Button>
|
|
<Alert status="success" w="100%">
|
|
<HStack>
|
|
<AlertIcon />
|
|
<Stack spacing={1}>
|
|
<Text fontWeight="semibold">Chat started!</Text>
|
|
<Text fontSize="sm">
|
|
The first message can take up to 2 min to be delivered.
|
|
</Text>
|
|
</Stack>
|
|
</HStack>
|
|
</Alert>
|
|
</Stack>
|
|
</SlideFade>
|
|
</Stack>
|
|
)
|
|
}
|