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