From 6a735916c1dabfe98ce24cf7d9cce7faa698a300 Mon Sep 17 00:00:00 2001 From: Baptiste Arnaud Date: Fri, 29 Sep 2023 17:41:40 +0200 Subject: [PATCH] :children_crossing: (whatsapp) Improve how the whatsapp preview behaves --- .../src/components/logos/WhatsAppLogo.tsx | 60 +++---------------- .../WhatsAppPreviewInstructions.tsx | 36 +++++++---- .../publish/components/embeds/EmbedButton.tsx | 13 +++- .../whatsapp/receiveMessagePreview.ts | 3 +- .../features/whatsapp/startWhatsAppPreview.ts | 15 ++--- .../inputs/buttons/parseButtonsReply.ts | 13 +--- .../whatsapp/convertRichTextToWhatsAppText.ts | 2 +- .../bot-engine/whatsapp/resumeWhatsAppFlow.ts | 2 +- 8 files changed, 56 insertions(+), 88 deletions(-) diff --git a/apps/builder/src/components/logos/WhatsAppLogo.tsx b/apps/builder/src/components/logos/WhatsAppLogo.tsx index c2d1b9c319e..4cd3beba6a2 100644 --- 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) => ( - - - - - - + - - - - - - - - - - - ) diff --git a/apps/builder/src/features/preview/components/WhatsAppPreviewInstructions.tsx b/apps/builder/src/features/preview/components/WhatsAppPreviewInstructions.tsx index 87aad0d363d..40679450066 100644 --- 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} > + + Need help? + + - The WhatsApp integration is still experimental. -
I appreciate your bug reports 🧡 + The WhatsApp integration is still in beta test. +
+ Your bug reports are greatly appreciate 🧡 { isDisabled={isEmpty(phoneNumber) || isMessageSent} isLoading={isSendingMessage} type="submit" + colorScheme="blue" > {hasMessageBeenSent ? 'Restart' : 'Start'} the chat )} + @@ -106,15 +129,6 @@ export const WhatsAppPreviewInstructions = (props: StackProps) => { - diff --git a/apps/builder/src/features/publish/components/embeds/EmbedButton.tsx b/apps/builder/src/features/publish/components/embeds/EmbedButton.tsx index c4067ae714e..6e0f8862e4d 100644 --- 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 ( } + logo={ + + } 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 index 54e4580a399..9ae10b17f63 100644 --- 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 index 86a4c8d5562..fbb49a85e53 100644 --- 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 index 9624c124074..5dde38af2a5 100644 --- 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 index e2c5e1ff297..22a3015c020 100644 --- 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(''', "'") ) - .join('') + .join('\n') diff --git a/packages/bot-engine/whatsapp/resumeWhatsAppFlow.ts b/packages/bot-engine/whatsapp/resumeWhatsAppFlow.ts index 4b7d17e3160..56885fb6dbd 100644 --- 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,