@botonic/react 0.37.2-alpha.0 → 0.38.0-alpha.0

package/src/webchat/context/use-webchat.ts

@@ -55,6 +55,10 @@ export interface UseWebchat {
   toggleEmojiPicker: (toggle: boolean) => void
   togglePersistentMenu: (toggle: boolean) => void
   toggleWebchat: (toggle: boolean) => void
+  updateCustomMessageProps: (
+    props: Record<string, any>,
+    messageId?: string
+  ) => void
   updateDevSettings: (settings: DevSettings) => void
   updateHandoff: (handoff: boolean) => void
   updateLastMessageDate: (date: string) => void
@@ -102,6 +106,15 @@ export function useWebchat(theme?: WebchatTheme): UseWebchat {
       payload: message,
     })
 
+  const updateCustomMessageProps = (
+    props: Record<string, any>,
+    messageId?: string
+  ) =>
+    webchatDispatch({
+      type: WebchatAction.UPDATE_CUSTOM_MESSAGE_PROPS,
+      payload: { messageId, props },
+    })
+
   const updateMessage = (message: WebchatMessage) =>
     webchatDispatch({ type: WebchatAction.UPDATE_MESSAGE, payload: message })
 
@@ -260,6 +273,7 @@ export function useWebchat(theme?: WebchatTheme): UseWebchat {
     toggleEmojiPicker,
     togglePersistentMenu,
     toggleWebchat,
+    updateCustomMessageProps,
     updateDevSettings,
     updateHandoff,
     updateLastMessageDate,

package/src/webchat/custom-messages/rating/index.tsx

@@ -1,5 +1,4 @@
 import { INPUT, InputType } from '@botonic/core'
-import merge from 'lodash.merge'
 import React, { useContext, useState } from 'react'
 import { ThemeContext } from 'styled-components'
 
@@ -14,56 +13,40 @@ interface CustomRatingMessageProps {
   messageText: string
   buttonText: string
   ratingType: RatingType
-  json: { messageId?: string; valueSent?: number }
+  id?: string // This id not exist in local development
+  valueSent?: number
 }
 
 const CustomRatingMessage: React.FC<CustomRatingMessageProps> = props => {
-  const { payloads, messageText, buttonText, ratingType } = props
-  const { webchatState, updateMessage, sendInput } = useContext(WebchatContext)
+  const { payloads, messageText, buttonText, ratingType, id, valueSent } = props
+  const { updateCustomMessageProps, sendInput } = useContext(WebchatContext)
 
   const theme = useContext(ThemeContext)
   const color = theme?.brand?.color ?? ''
 
-  const [ratingValue, setRatingValue] = useState(
-    props.json?.valueSent ? props.json.valueSent : -1
-  )
+  const [ratingValue, setRatingValue] = useState(valueSent ? valueSent : -1)
   const [showRating, setShowRating] = useState(true)
 
   const ratingChanged = (newRating: number) => {
     setRatingValue(newRating)
   }
 
-  const updateMessageJSON = (messageId?: string) => {
-    if (messageId) {
-      const messageToUpdate = webchatState.messagesJSON.filter(m => {
-        return m.id === messageId
-      })[0]
-      const messageInfo = {
-        data: {
-          json: {
-            valueSent: ratingValue,
-          },
-        },
-      }
-      const updatedMsg = merge(messageToUpdate, messageInfo)
-      updateMessage(updatedMsg)
-    }
-  }
-
   const handleButtonSend = () => {
-    if (ratingValue !== -1) {
-      setShowRating(false)
+    if (ratingValue === -1) return
 
-      const payload = payloads[ratingValue - 1]
+    const json = {
+      valueSent: ratingValue,
+    }
+    updateCustomMessageProps(json, id)
 
-      updateMessageJSON(props.json?.messageId)
+    setShowRating(false)
+    const payload = payloads[ratingValue - 1]
 
-      const input = {
-        type: INPUT.POSTBACK as InputType,
-        payload,
-      }
-      void sendInput(input)
+    const input = {
+      type: INPUT.POSTBACK as InputType,
+      payload,
     }
+    void sendInput(input)
   }
 
   const disabled = ratingValue === -1
@@ -77,10 +60,10 @@ const CustomRatingMessage: React.FC<CustomRatingMessageProps> = props => {
           onRatingChange={ratingChanged}
           ratingValue={ratingValue}
           ratingType={ratingType}
-          valueSent={props.json?.valueSent}
+          valueSent={valueSent}
         />
       </MessageBubble>
-      {!props.json?.valueSent && showRating && (
+      {!props?.valueSent && showRating && (
         <Button
           autodisable={true}
           disabled={disabled}

package/src/webchat/webchat.tsx

@@ -86,6 +86,7 @@ const Webchat = forwardRef<WebchatRef | null, WebchatProps>((props, ref) => {
     toggleEmojiPicker,
     togglePersistentMenu,
     toggleWebchat,
+    updateCustomMessageProps,
     updateDevSettings,
     updateHandoff,
     updateLastMessageDate,
@@ -650,6 +651,7 @@ const Webchat = forwardRef<WebchatRef | null, WebchatProps>((props, ref) => {
         toggleEmojiPicker,
         togglePersistentMenu,
         toggleCoverComponent,
+        updateCustomMessageProps,
         updateLatestInput,
         updateMessage,
         updateReplies,