🐛 (whatsapp) Fix auto start input where it didn't display next bu… (#869)

…bbles
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
### Summary by CodeRabbit

**Release Notes**

- New Feature: Enhanced WhatsApp integration with improved phone number
formatting and session ID generation.
- Refactor: Updated the `startWhatsAppPreview` and
`receiveMessagePreview` functions for better consistency and
readability.
- Bug Fix: Added a check for `phoneNumberId` in the `receiveMessage`
function to prevent errors when it's undefined.
- Documentation: Expanded the WhatsApp integration guide and FAQs in the
docs, providing more detailed instructions and addressing common
queries.
- Chore: Introduced a new `metadata` field in the
`whatsAppWebhookRequestBodySchema` to store the `phone_number_id`.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/builder/src/features/preview/components/WhatsAppPreviewInstructions.tsx

@@ -6,8 +6,8 @@ import {
   Alert,
   AlertIcon,
   Button,
-  Flex,
   HStack,
+  Link,
   SlideFade,
   Stack,
   StackProps,
@@ -84,28 +84,38 @@ export const WhatsAppPreviewInstructions = (props: StackProps) => {
         defaultValue={phoneNumber}
         onChange={setPhoneNumber}
       />
-      <Button
-        isDisabled={isEmpty(phoneNumber) || isMessageSent}
-        isLoading={isSendingMessage}
-        type="submit"
-      >
-        {hasMessageBeenSent ? 'Restart' : 'Start'} the chat
-      </Button>
+      {!isMessageSent && (
+        <Button
+          isDisabled={isEmpty(phoneNumber) || isMessageSent}
+          isLoading={isSendingMessage}
+          type="submit"
+        >
+          {hasMessageBeenSent ? 'Restart' : 'Start'} the chat
+        </Button>
+      )}
       <SlideFade offsetY="20px" in={isMessageSent} unmountOnExit>
-        <Flex>
+        <Stack>
           <Alert status="success" w="100%">
             <HStack>
               <AlertIcon />
               <Stack spacing={1}>
                 <Text fontWeight="semibold">Chat started!</Text>
                 <Text fontSize="sm">
-                  Open WhatsApp to test your bot. The first message can take up
-                  to 2 min to be delivered.
+                  The first message can take up to 2 min to be delivered.
                 </Text>
               </Stack>
             </HStack>
           </Alert>
-        </Flex>
+          <Button
+            as={Link}
+            href={`https://web.whatsapp.com/`}
+            isExternal
+            size="sm"
+            colorScheme="blue"
+          >
+            Open WhatsApp Web
+          </Button>
+        </Stack>
       </SlideFade>
     </Stack>
   )

apps/builder/src/features/whatsapp/getPhoneNumber.ts

@@ -47,7 +47,7 @@ export const getPhoneNumber = authenticatedProcedure
 
     const formattedPhoneNumber = `${
       display_phone_number.startsWith('+') ? '' : '+'
-    }${display_phone_number.replace(/\s-/g, '')}`
+    }${display_phone_number.replace(/[\s-]/g, '')}`
 
     return {
       id: credentials.phoneNumberId,

apps/builder/src/features/whatsapp/receiveMessagePreview.ts

@@ -34,7 +34,7 @@ export const receiveMessagePreview = publicProcedure
     const contactPhoneNumber = '+' + receivedMessage.from
     return resumeWhatsAppFlow({
       receivedMessage,
-      sessionId: `wa-${receivedMessage.from}-preview`,
+      sessionId: `wa-preview-${receivedMessage.from}`,
       contact: {
         name: contactName,
         phoneNumber: contactPhoneNumber,

apps/builder/src/features/whatsapp/startWhatsAppPreview.ts

@@ -27,7 +27,9 @@ export const startWhatsAppPreview = authenticatedProcedure
       to: z
         .string()
         .min(1)
-        .transform((value) => value.replace(/\s/g, '').replace(/\+/g, '')),
+        .transform((value) =>
+          value.replace(/\s/g, '').replace(/\+/g, '').replace(/-/g, '')
+        ),
       typebotId: z.string(),
       startGroupId: z.string().optional(),
     })
@@ -70,7 +72,7 @@ export const startWhatsAppPreview = authenticatedProcedure
       )
         throw new TRPCError({ code: 'NOT_FOUND', message: 'Typebot not found' })
 
-      const sessionId = `wa-${to}-preview`
+      const sessionId = `wa-preview-${to}`
 
       const existingSession = await prisma.chatSession.findFirst({
         where: {
@@ -130,7 +132,7 @@ export const startWhatsAppPreview = authenticatedProcedure
             whatsApp: (existingSession?.state as SessionState | undefined)
               ?.whatsApp,
           },
-          id: `wa-${to}-preview`,
+          id: sessionId,
         })
         try {
           await sendWhatsAppMessage({