From caa6015359614266b5d777218946488565d49882 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Wed, 1 Jun 2022 09:29:13 +0200
Subject: [PATCH] =?UTF-8?q?fix(engine):=20=F0=9F=92=84=20Scroll=20when=20p?=
 =?UTF-8?q?ayment=20form=20appears?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ChatBlock/ChatBlock.tsx    |  8 +++---
 .../inputs/PaymentForm/StripePaymentForm.tsx  |  7 ++++-
 .../src/components/ConversationContainer.tsx  | 25 +++++++++--------
 .../bot-engine/src/contexts/ChatContext.tsx   | 28 +++++++++++++++++++
 4 files changed, 52 insertions(+), 16 deletions(-)
 create mode 100644 packages/bot-engine/src/contexts/ChatContext.tsx

diff --git a/packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx b/packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx
index 723f9f11f..74f15c9eb 100644
--- a/packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx
+++ b/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))
diff --git a/packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/PaymentForm/StripePaymentForm.tsx b/packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/PaymentForm/StripePaymentForm.tsx
index 607d38db0..f0907a751 100644
--- a/packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/PaymentForm/StripePaymentForm.tsx
+++ b/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
diff --git a/packages/bot-engine/src/components/ConversationContainer.tsx b/packages/bot-engine/src/components/ConversationContainer.tsx
index 862f8c4af..e58570026 100644
--- a/packages/bot-engine/src/components/ConversationContainer.tsx
+++ b/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>
diff --git a/packages/bot-engine/src/contexts/ChatContext.tsx b/packages/bot-engine/src/contexts/ChatContext.tsx
new file mode 100644
index 000000000..8cd06a145
--- /dev/null
+++ b/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)