🚸 (whatsapp) Improve how the whatsapp preview behaves (#873)

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

- New Feature: Updated WhatsApp logo with a new design and color scheme.
- New Feature: Added a help button in the UI linking to documentation,
enhancing user guidance.
- New Feature: Introduced an alert message indicating that the WhatsApp
integration is in beta testing.
- New Feature: Implemented a button to open WhatsApp Web directly from
the application, improving user convenience.
- Refactor: Adjusted the retrieval of `contactPhoneNumber` in
`receiveMessagePreview` function for better data structure
compatibility.
- Refactor: Optimized the initialization and management of the WhatsApp
session in `startWhatsAppPreview`.
- Refactor: Improved the `parseButtonsReply` function by refining
condition checks.
- Refactor: Enhanced the readability of serialized rich text in
`convertRichTextToWhatsAppText` by introducing newline characters.
- Bug Fix: Ensured preservation of `contact` information when resuming
the WhatsApp flow in `resumeWhatsAppFlow`.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -20,6 +20,7 @@ import {
   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()
@@ -70,10 +71,22 @@ export const WhatsAppPreviewInstructions = (props: StackProps) => {
       onSubmit={sendWhatsAppPreviewStartMessage}
       {...props}
     >
+      <HStack justifyContent="flex-end">
+        <Text fontSize="sm">Need help?</Text>
+        <Button
+          as={Link}
+          href="https://docs.typebot.io/embed/whatsapp"
+          leftIcon={<BuoyIcon />}
+          size="sm"
+        >
+          Check the docs
+        </Button>
+      </HStack>
       <Alert status="warning">
         <AlertIcon />
-        The WhatsApp integration is still experimental.
-        <br />I appreciate your bug reports 🧡
+        The WhatsApp integration is still in beta test.
+        <br />
+        Your bug reports are greatly appreciate 🧡
       </Alert>
       <TextInput
         label="Your phone number"
@@ -89,12 +102,22 @@ export const WhatsAppPreviewInstructions = (props: StackProps) => {
           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 />
@@ -106,15 +129,6 @@ export const WhatsAppPreviewInstructions = (props: StackProps) => {
               </Stack>
             </HStack>
           </Alert>
-          <Button
-            as={Link}
-            href={`https://web.whatsapp.com/`}
-            isExternal
-            size="sm"
-            colorScheme="blue"
-          >
-            Open WhatsApp Web
-          </Button>
         </Stack>
       </SlideFade>
     </Stack>

apps/builder/src/features/publish/components/embeds/EmbedButton.tsx

@@ -37,7 +37,10 @@ import { FlutterFlowLogo } from './logos/FlutterFlowLogo'
 import { FlutterFlowModal } from './modals/FlutterFlowModal'
 import { NextjsLogo } from './logos/NextjsLogo'
 import { NextjsModal } from './modals/Nextjs/NextjsModal'
-import { WhatsAppLogo } from '@/components/logos/WhatsAppLogo'
+import {
+  WhatsAppLogo,
+  whatsAppBrandColor,
+} from '@/components/logos/WhatsAppLogo'
 import { WhatsAppModal } from './modals/WhatsAppModal/WhatsAppModal'
 import { ParentModalProvider } from '@/features/graph/providers/ParentModalProvider'
 import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
@@ -100,7 +103,13 @@ export const integrationsList = [
     return (
       <ParentModalProvider>
         <EmbedButton
-          logo={<WhatsAppLogo height={100} width="70px" />}
+          logo={
+            <WhatsAppLogo
+              height={100}
+              width="60px"
+              color={whatsAppBrandColor}
+            />
+          }
           label="WhatsApp"
           lockTagPlan={hasProPerks(workspace) ? undefined : 'PRO'}
           modal={({ onClose, isOpen }) => (

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

@@ -31,7 +31,8 @@ export const receiveMessagePreview = publicProcedure
     if (isNotDefined(receivedMessage)) return { message: 'No message found' }
     const contactName =
       entry.at(0)?.changes.at(0)?.value?.contacts?.at(0)?.profile?.name ?? ''
-    const contactPhoneNumber = '+' + receivedMessage.from
+    const contactPhoneNumber =
+      entry.at(0)?.changes.at(0)?.value?.messages?.at(0)?.from ?? ''
     return resumeWhatsAppFlow({
       receivedMessage,
       sessionId: `wa-preview-${receivedMessage.from}`,

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

@@ -98,6 +98,10 @@ export const startWhatsAppPreview = authenticatedProcedure
             startGroupId,
           },
           userId: user.id,
+          initialSessionState: {
+            whatsApp: (existingSession?.state as SessionState | undefined)
+              ?.whatsApp,
+          },
         })
 
       if (canSendDirectMessagesToUser) {
@@ -119,19 +123,12 @@ export const startWhatsAppPreview = authenticatedProcedure
           logs,
           session: {
             id: sessionId,
-            state: {
-              ...newSessionState,
-              currentBlock: !input ? undefined : newSessionState.currentBlock,
-            },
+            state: newSessionState,
           },
         })
       } else {
         await restartSession({
-          state: {
-            ...newSessionState,
-            whatsApp: (existingSession?.state as SessionState | undefined)
-              ?.whatsApp,
-          },
+          state: newSessionState,
           id: sessionId,
         })
         try {