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

baptisteArno · web-flow · commit f016072e3eef · 2023-09-29T17:47:10.000+02:00
&lt;!-- This is an auto-generated comment: release notes by coderabbit.ai
--&gt;
### 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`.
&lt;!-- end of auto-generated comment: release notes by coderabbit.ai --&gt;
diff --git a/apps/builder/src/components/logos/WhatsAppLogo.tsx b/apps/builder/src/components/logos/WhatsAppLogo.tsx
@@ -1,60 +1,14 @@
 import { IconProps, Icon } from '@chakra-ui/react'
 
+export const whatsAppBrandColor = '#25D366'
+
 export const WhatsAppLogo = (props: IconProps) => (
-  <Icon viewBox="0 0 163 164" {...props}>
-    <g filter="url(#filter0_f_1006_58)">
-      <path
-        d="M48.5649 132.648L50.7999 133.972C60.1869 139.543 70.9499 142.49 81.9259 142.495H81.9489C115.656 142.495 143.088 115.069 143.102 81.3599C143.108 65.0249 136.753 49.6639 125.207 38.1089C119.544 32.4103 112.807 27.8915 105.386 24.8141C97.9646 21.7368 90.0068 20.162 81.9729 20.1809C48.2399 20.1809 20.8069 47.6039 20.7949 81.3109C20.7783 92.8208 24.0195 104.101 30.1439 113.846L31.5989 116.158L25.4199 138.716L48.5649 132.648ZM7.75391 156.192L18.1929 118.078C11.7549 106.924 8.36791 94.2699 8.37191 81.3059C8.38891 40.7499 41.3929 7.75586 81.9499 7.75586C101.631 7.76586 120.104 15.4249 133.997 29.3279C147.89 43.2309 155.534 61.7109 155.527 81.3649C155.509 121.918 122.5 154.918 81.9489 154.918H81.9169C69.6039 154.913 57.5049 151.824 46.7579 145.964L7.75391 156.192Z"
-        fill="#B3B3B3"
-      />
-    </g>
-    <path
-      d="M7 155.436L17.439 117.322C10.9899 106.141 7.60242 93.4575 7.618 80.55C7.635 39.994 40.639 7 81.196 7C100.877 7.01 119.35 14.669 133.243 28.572C147.136 42.475 154.78 60.955 154.773 80.609C154.755 121.162 121.746 154.162 81.195 154.162H81.163C68.85 154.157 56.751 151.068 46.004 145.208L7 155.436Z"
-      fill="white"
-    />
-    <path
-      d="M81.2171 19.425C47.4841 19.425 20.0511 46.848 20.0391 80.555C20.0225 92.065 23.2637 103.345 29.3881 113.09L30.8431 115.403L24.6641 137.961L47.8101 131.892L50.0451 133.216C59.4321 138.787 70.1951 141.733 81.1711 141.739H81.1941C114.901 141.739 142.334 114.313 142.347 80.604C142.373 72.5696 140.804 64.6099 137.732 57.1858C134.661 49.7617 130.147 43.0207 124.452 37.353C118.789 31.6543 112.052 27.1354 104.631 24.0581C97.2092 20.9807 89.2512 19.406 81.2171 19.425Z"
-      fill="url(#paint0_linear_1006_58)"
-    />
+  <Icon viewBox="0 0 510 513" {...props}>
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M62.8046 49.801C61.4266 46.74 59.9766 46.678 58.6676 46.625L55.1436 46.582C53.9176 46.582 51.9256 47.042 50.2416 48.882C48.5576 50.722 43.8066 55.169 43.8066 64.214C43.8066 73.259 50.3946 81.999 51.3126 83.227C52.2306 84.455 64.0306 103.608 82.7176 110.977C98.2466 117.101 101.407 115.883 104.779 115.577C108.151 115.271 115.656 111.13 117.187 106.837C118.718 102.544 118.719 98.866 118.26 98.097C117.801 97.328 116.575 96.871 114.735 95.951C112.895 95.031 103.858 90.584 102.173 89.97C100.488 89.356 99.2626 89.051 98.0356 90.891C96.8086 92.731 93.2896 96.87 92.2166 98.097C91.1436 99.324 90.0726 99.478 88.2326 98.559C86.3926 97.64 80.4726 95.698 73.4486 89.435C67.9836 84.562 64.2946 78.544 63.2206 76.705C62.1466 74.866 63.1066 73.87 64.0286 72.954C64.8536 72.13 65.8666 70.807 66.7876 69.734C67.7086 68.661 68.0116 67.894 68.6236 66.669C69.2356 65.444 68.9306 64.368 68.4706 63.449C68.0106 62.53 64.4386 53.437 62.8046 49.801Z"
-      fill="white"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M435.689 74.468C387.754 26.471 324 0.025 256.071 0C116.098 0 2.18 113.906 2.131 253.916C2.107 298.674 13.808 342.361 36.029 380.862L0 512.459L134.617 477.148C171.704 497.386 213.467 508.039 255.962 508.051H256.071C396.02 508.051 509.951 394.134 509.999 254.123C510.023 186.268 483.638 122.478 435.689 74.48V74.468ZM256.071 465.168H255.986C218.118 465.157 180.97 454.976 148.558 435.751L140.851 431.174L60.965 452.127L82.285 374.238L77.268 366.251C56.143 332.646 44.978 293.804 45.002 253.929C45.051 137.563 139.731 42.883 256.157 42.883C312.53 42.908 365.521 64.886 405.371 104.786C445.224 144.674 467.152 197.713 467.128 254.099C467.078 370.476 372.4 465.157 256.071 465.157V465.168ZM371.839 307.101C365.495 303.923 334.302 288.581 328.481 286.462C322.661 284.343 318.437 283.285 314.211 289.64C309.986 295.997 297.823 310.291 294.121 314.515C290.419 318.753 286.718 319.277 280.374 316.098C274.031 312.92 253.587 306.224 229.345 284.611C210.485 267.784 197.748 247.013 194.048 240.656C190.346 234.301 193.658 230.867 196.823 227.713C199.672 224.865 203.167 220.299 206.345 216.597C209.523 212.895 210.57 210.242 212.688 206.016C214.808 201.778 213.748 198.079 212.166 194.899C210.582 191.722 197.895 160.49 192.598 147.791C187.447 135.421 182.213 137.101 178.329 136.894C174.626 136.711 170.402 136.675 166.165 136.675C161.928 136.675 155.06 138.257 149.24 144.614C143.42 150.968 127.031 166.323 127.031 197.541C127.031 228.761 149.764 258.946 152.942 263.183C156.119 267.42 197.687 331.501 261.331 358.995C276.466 365.533 288.288 369.441 297.506 372.363C312.702 377.197 326.533 376.516 337.466 374.883C349.656 373.058 375.006 359.53 380.29 344.711C385.573 329.893 385.573 317.182 383.991 314.539C382.409 311.898 378.172 310.302 371.828 307.125L371.839 307.101Z"
+      fill="currentColor"
     />
-    <defs>
-      <filter
-        id="filter0_f_1006_58"
-        x="0.691906"
-        y="0.69386"
-        width="161.897"
-        height="162.56"
-        filterUnits="userSpaceOnUse"
-        colorInterpolationFilters="sRGB"
-      >
-        <feFlood floodOpacity="0" result="BackgroundImageFix" />
-        <feBlend
-          mode="normal"
-          in="SourceGraphic"
-          in2="BackgroundImageFix"
-          result="shape"
-        />
-        <feGaussianBlur
-          stdDeviation="3.531"
-          result="effect1_foregroundBlur_1006_58"
-        />
-      </filter>
-      <linearGradient
-        id="paint0_linear_1006_58"
-        x1="79.9481"
-        y1="26.765"
-        x2="80.5681"
-        y2="131.29"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#57D163" />
-        <stop offset="1" stopColor="#23B33A" />
-      </linearGradient>
-    </defs>
   </Icon>
 )
diff --git a/apps/builder/src/features/preview/components/WhatsAppPreviewInstructions.tsx b/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>
diff --git a/apps/builder/src/features/publish/components/embeds/EmbedButton.tsx b/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 }) => (
diff --git a/apps/builder/src/features/whatsapp/receiveMessagePreview.ts b/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}`,
diff --git a/apps/builder/src/features/whatsapp/startWhatsAppPreview.ts b/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 {
diff --git a/packages/bot-engine/blocks/inputs/buttons/parseButtonsReply.ts b/packages/bot-engine/blocks/inputs/buttons/parseButtonsReply.ts
@@ -63,21 +63,14 @@ export const parseButtonsReply =
         reply: matchedItems.map((item) => item.content).join(', '),
       }
     }
-    if (state.whatsApp) {
-      const matchedItem = displayedItems.find((item) => item.id === inputValue)
-      if (!matchedItem) return { status: 'fail' }
-      return {
-        status: 'success',
-        reply: matchedItem.content ?? '',
-      }
-    }
     const longestItemsFirst = [...displayedItems].sort(
       (a, b) => (b.content?.length ?? 0) - (a.content?.length ?? 0)
     )
     const matchedItem = longestItemsFirst.find(
       (item) =>
-        item.content &&
-        inputValue.toLowerCase().trim() === item.content.toLowerCase().trim()
+        item.id === inputValue ||
+        (item.content &&
+          inputValue.toLowerCase().trim() === item.content.toLowerCase().trim())
     )
     if (!matchedItem) return { status: 'fail' }
     return {
diff --git a/packages/bot-engine/whatsapp/convertRichTextToWhatsAppText.ts b/packages/bot-engine/whatsapp/convertRichTextToWhatsAppText.ts
@@ -6,4 +6,4 @@ export const convertRichTextToWhatsAppText = (richText: TElement[]): string =>
     .map((chunk) =>
       serialize(chunk)?.replaceAll('**', '*').replaceAll('&amp;#39;', "'")
     )
-    .join('')
+    .join('\n')
diff --git a/packages/bot-engine/whatsapp/resumeWhatsAppFlow.ts b/packages/bot-engine/whatsapp/resumeWhatsAppFlow.ts
@@ -67,7 +67,7 @@ export const resumeWhatsAppFlow = async ({
     session && !isSessionExpired
       ? session.state.currentBlock
         ? await continueBotFlow(session.state)(messageContent)
-        : await startBotFlow(session.state)
+        : await startBotFlow({ ...session.state, whatsApp: { contact } })
       : workspaceId
       ? await startWhatsAppSession({
           incomingMessage: messageContent,

Original file line number	Diff line number	Diff line change
`@@ -6,4 +6,4 @@ export const convertRichTextToWhatsAppText = (richText: TElement[]): string =>`
`6`	`6`	`.map((chunk) =>`
`7`	`7`	`serialize(chunk)?.replaceAll('*', '').replaceAll('&#39;', "'")`
`8`	`8`	`)`
`9`		`- .join('')`
	`9`	`+ .join('\n')`