fix(engine): 💄 Scroll when payment form appears

packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx

@@ -26,13 +26,13 @@ import {
 import { HostBubble } from './ChatStep/bubbles/HostBubble'
 import { InputChatStep } from './ChatStep/InputChatStep'
 import { getLastChatStepType } from '../../services/chat'
+import { useChat } from 'contexts/ChatContext'
 
 type ChatBlockProps = {
   steps: Step[]
   startStepIndex: number
   blockTitle: string
   keepShowingHostAvatar: boolean
-  onScroll: () => void
   onBlockEnd: (
     edgeId?: string,
     updatedTypebot?: PublicTypebot | LinkedTypebot
@@ -45,7 +45,6 @@ export const ChatBlock = ({
   steps,
   startStepIndex,
   blockTitle,
-  onScroll,
   onBlockEnd,
   keepShowingHostAvatar,
 }: ChatBlockProps) => {
@@ -63,6 +62,7 @@ export const ChatBlock = ({
     pushEdgeIdInLinkedTypebotQueue,
   } = useTypebot()
   const { resultValues, updateVariables, resultId } = useAnswers()
+  const { scroll } = useChat()
   const [processedSteps, setProcessedSteps] = useState<Step[]>([])
   const [displayedChunks, setDisplayedChunks] = useState<ChatDisplayChunk[]>([])
 
@@ -102,7 +102,7 @@ export const ChatBlock = ({
   }, [])
 
   useEffect(() => {
-    onScroll()
+    scroll()
     onNewStepDisplayed()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [processedSteps])
@@ -155,7 +155,7 @@ export const ChatBlock = ({
   }
 
   const displayNextStep = (answerContent?: string, isRetry?: boolean) => {
-    onScroll()
+    scroll()
     const currentStep = [...processedSteps].pop()
     if (currentStep) {
       if (isRetry && stepCanBeRetried(currentStep))

packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/PaymentForm/StripePaymentForm.tsx

@@ -8,6 +8,7 @@ import { SendButton, Spinner } from '../SendButton'
 import { useFrame } from 'react-frame-component'
 import { initStripe } from '../../../../../../lib/stripe'
 import { parseVariables } from 'services/variable'
+import { useChat } from 'contexts/ChatContext'
 
 type Props = {
   options: PaymentInputOptions
@@ -80,6 +81,7 @@ const CheckoutForm = ({
   variables: Variable[]
   viewerHost: string
 }) => {
+  const { scroll } = useChat()
   const [ignoreFirstPaymentIntentCall, setIgnoreFirstPaymentIntentCall] =
     useState(true)
 
@@ -154,7 +156,10 @@ const CheckoutForm = ({
     setMessage('An unexpected error occured.')
   }
 
-  const showPayButton = () => setIsPayButtonVisible(true)
+  const showPayButton = () => {
+    setIsPayButtonVisible(true)
+    scroll()
+  }
 
   return (
     <form

packages/bot-engine/src/components/ConversationContainer.tsx

@@ -8,6 +8,7 @@ import { Block, Edge, PublicTypebot, Theme, VariableWithValue } from 'models'
 import { byId, isNotDefined } from 'utils'
 import { animateScroll as scroll } from 'react-scroll'
 import { LinkedTypebot, useTypebot } from 'contexts/TypebotContext'
+import { ChatContext } from 'contexts/ChatContext'
 
 type Props = {
   theme: Theme
@@ -104,17 +105,19 @@ export const ConversationContainer = ({
       ref={scrollableContainer}
       className="overflow-y-scroll w-full lg:w-3/4 min-h-full rounded lg:px-5 px-3 pt-10 relative scrollable-container typebot-chat-view"
     >
-      {displayedBlocks.map((displayedBlock, idx) => (
-        <ChatBlock
-          key={displayedBlock.block.id + idx}
-          steps={displayedBlock.block.steps}
-          startStepIndex={displayedBlock.startStepIndex}
-          onScroll={autoScrollToBottom}
-          onBlockEnd={displayNextBlock}
-          blockTitle={displayedBlock.block.title}
-          keepShowingHostAvatar={idx === displayedBlocks.length - 1}
-        />
-      ))}
+      <ChatContext onScroll={autoScrollToBottom}>
+        {displayedBlocks.map((displayedBlock, idx) => (
+          <ChatBlock
+            key={displayedBlock.block.id + idx}
+            steps={displayedBlock.block.steps}
+            startStepIndex={displayedBlock.startStepIndex}
+            onBlockEnd={displayNextBlock}
+            blockTitle={displayedBlock.block.title}
+            keepShowingHostAvatar={idx === displayedBlocks.length - 1}
+          />
+        ))}
+      </ChatContext>
+
       {/* We use a block to simulate padding because it makes iOS scroll flicker */}
       <div className="w-full h-32" ref={bottomAnchor} />
     </div>

packages/bot-engine/src/contexts/ChatContext.tsx

@@ -0,0 +1,28 @@
+import React, { createContext, ReactNode, useContext } from 'react'
+
+const chatContext = createContext<{
+  scroll: () => void
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-ignore
+}>({})
+
+export const ChatContext = ({
+  children,
+  onScroll,
+}: {
+  children: ReactNode
+  onScroll: () => void
+}) => {
+  const scroll = onScroll
+  return (
+    <chatContext.Provider
+      value={{
+        scroll,
+      }}
+    >
+      {children}
+    </chatContext.Provider>
+  )
+}
+
+export const useChat = () => useContext(chatContext)