@botonic/react 0.36.5 → 0.37.0

package/src/webchat/custom-messages/rating/icons/face-grin-beam.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { RatingIconProps } from '../types'
+
+export const FaceGrinBeamSvg = ({ color, selected }: RatingIconProps) => {
+  return selected ? (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' color={color}>
+      <path
+        d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM388.1 312.8c12.3-3.8 24.3 6.9 19.3 18.7C382.4 390.6 324.2 432 256.3 432s-126.2-41.4-151.1-100.5c-5-11.8 7-22.5 19.3-18.7c39.7 12.2 84.5 19 131.8 19s92.1-6.8 131.8-19zm-170.5-84s0 0 0 0c0 0 0 0 0 0l-.2-.2c-.2-.2-.4-.5-.7-.9c-.6-.8-1.6-2-2.8-3.4c-2.5-2.8-6-6.6-10.2-10.3c-8.8-7.8-18.8-14-27.7-14s-18.9 6.2-27.7 14c-4.2 3.7-7.7 7.5-10.2 10.3c-1.2 1.4-2.2 2.6-2.8 3.4c-.3 .4-.6 .7-.7 .9l-.2 .2c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0c-2.1 2.8-5.7 3.9-8.9 2.8s-5.5-4.1-5.5-7.6c0-17.9 6.7-35.6 16.6-48.8c9.8-13 23.9-23.2 39.4-23.2s29.6 10.2 39.4 23.2c9.9 13.2 16.6 30.9 16.6 48.8c0 3.4-2.2 6.5-5.5 7.6s-6.9 0-8.9-2.8c0 0 0 0 0 0s0 0 0 0zm160 0c0 0 0 0 0 0l-.2-.2c-.2-.2-.4-.5-.7-.9c-.6-.8-1.6-2-2.8-3.4c-2.5-2.8-6-6.6-10.2-10.3c-8.8-7.8-18.8-14-27.7-14s-18.9 6.2-27.7 14c-4.2 3.7-7.7 7.5-10.2 10.3c-1.2 1.4-2.2 2.6-2.8 3.4c-.3 .4-.6 .7-.7 .9l-.2 .2c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0c-2.1 2.8-5.7 3.9-8.9 2.8s-5.5-4.1-5.5-7.6c0-17.9 6.7-35.6 16.6-48.8c9.8-13 23.9-23.2 39.4-23.2s29.6 10.2 39.4 23.2c9.9 13.2 16.6 30.9 16.6 48.8c0 3.4-2.2 6.5-5.5 7.6s-6.9 0-8.9-2.8c0 0 0 0 0 0s0 0 0 0s0 0 0 0z'
+        fill='currentColor'
+      />
+    </svg>
+  ) : (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' color={color}>
+      <path
+        d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm349.5 52.4c18.7-4.4 35.9 12 25.5 28.1C350.4 374.6 306.3 400 255.9 400s-94.5-25.4-119.1-63.5c-10.4-16.1 6.8-32.5 25.5-28.1c28.9 6.8 60.5 10.5 93.6 10.5s64.7-3.7 93.6-10.5zM217.6 228.8s0 0 0 0c0 0 0 0 0 0l-.2-.2c-.2-.2-.4-.5-.7-.9c-.6-.8-1.6-2-2.8-3.4c-2.5-2.8-6-6.6-10.2-10.3c-8.8-7.8-18.8-14-27.7-14s-18.9 6.2-27.7 14c-4.2 3.7-7.7 7.5-10.2 10.3c-1.2 1.4-2.2 2.6-2.8 3.4c-.3 .4-.6 .7-.7 .9l-.2 .2c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0c-2.1 2.8-5.7 3.9-8.9 2.8s-5.5-4.1-5.5-7.6c0-17.9 6.7-35.6 16.6-48.8c9.8-13 23.9-23.2 39.4-23.2s29.6 10.2 39.4 23.2c9.9 13.2 16.6 30.9 16.6 48.8c0 3.4-2.2 6.5-5.5 7.6s-6.9 0-8.9-2.8c0 0 0 0 0 0s0 0 0 0zm160 0c0 0 0 0 0 0l-.2-.2c-.2-.2-.4-.5-.7-.9c-.6-.8-1.6-2-2.8-3.4c-2.5-2.8-6-6.6-10.2-10.3c-8.8-7.8-18.8-14-27.7-14s-18.9 6.2-27.7 14c-4.2 3.7-7.7 7.5-10.2 10.3c-1.2 1.4-2.2 2.6-2.8 3.4c-.3 .4-.6 .7-.7 .9l-.2 .2c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0c-2.1 2.8-5.7 3.9-8.9 2.8s-5.5-4.1-5.5-7.6c0-17.9 6.7-35.6 16.6-48.8c9.8-13 23.9-23.2 39.4-23.2s29.6 10.2 39.4 23.2c9.9 13.2 16.6 30.9 16.6 48.8c0 3.4-2.2 6.5-5.5 7.6s-6.9 0-8.9-2.8c0 0 0 0 0 0s0 0 0 0s0 0 0 0z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/webchat/custom-messages/rating/icons/face-meh.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { RatingIconProps } from '../types'
+
+export const FaceMehSvg = ({ color, selected }: RatingIconProps) => {
+  return selected ? (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' color={color}>
+      <path
+        d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM176.4 176a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm128 32a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM160 336l192 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-192 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z'
+        fill='currentColor'
+      />
+    </svg>
+  ) : (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' color={color}>
+      <path
+        d='M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM256 0a256 256 0 1 0 0 512A256 256 0 1 0 256 0zM176.4 240a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm192-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM184 328c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/webchat/custom-messages/rating/icons/face-smile.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { RatingIconProps } from '../types'
+
+export const FaceSmileSvg = ({ color, selected }: RatingIconProps) => {
+  return selected ? (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' color={color}>
+      <path
+        d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM164.1 325.5C182 346.2 212.6 368 256 368s74-21.8 91.9-42.5c5.8-6.7 15.9-7.4 22.6-1.6s7.4 15.9 1.6 22.6C349.8 372.1 311.1 400 256 400s-93.8-27.9-116.1-53.5c-5.8-6.7-5.1-16.8 1.6-22.6s16.8-5.1 22.6 1.6zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'
+        fill='currentColor'
+      />
+    </svg>
+  ) : (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' color={color}>
+      <path
+        d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm177.6 62.1C192.8 334.5 218.8 352 256 352s63.2-17.5 78.4-33.9c9-9.7 24.2-10.4 33.9-1.4s10.4 24.2 1.4 33.9c-22 23.8-60 49.4-113.6 49.4s-91.7-25.5-113.6-49.4c-9-9.7-8.4-24.9 1.4-33.9s24.9-8.4 33.9 1.4zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/webchat/custom-messages/rating/icons/index.ts

@@ -0,0 +1,6 @@
+export * from './face-angry'
+export * from './face-frown'
+export * from './face-grin-beam'
+export * from './face-meh'
+export * from './face-smile'
+export * from './star'

package/src/webchat/custom-messages/rating/icons/star.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { RatingIconProps } from '../types'
+
+export const StarSvg = ({ color, selected }: RatingIconProps) => {
+  return selected ? (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' color={color}>
+      <path
+        d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'
+        fill='currentColor'
+      />
+    </svg>
+  ) : (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' color={color}>
+      <path
+        d='M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

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

@@ -0,0 +1,99 @@
+import { INPUT, InputType } from '@botonic/core'
+import merge from 'lodash.merge'
+import React, { useContext, useState } from 'react'
+import { ThemeContext } from 'styled-components'
+
+import { Button, customMessage } from '../../../components'
+import { WebchatContext } from '../../context'
+import { RatingSelector } from './rating-selector'
+import { MessageBubble } from './styles'
+import { RatingType } from './types'
+
+interface CustomRatingMessageProps {
+  payloads: string[]
+  messageText: string
+  buttonText: string
+  ratingType: RatingType
+  json: { messageId?: string; valueSent?: number }
+}
+
+const CustomRatingMessage: React.FC<CustomRatingMessageProps> = props => {
+  const { payloads, messageText, buttonText, ratingType } = props
+  const { webchatState, updateMessage, sendInput } = useContext(WebchatContext)
+
+  const theme = useContext(ThemeContext)
+  const color = theme?.brand?.color ?? ''
+
+  const [ratingValue, setRatingValue] = useState(
+    props.json?.valueSent ? props.json.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)
+
+      const payload = payloads[ratingValue - 1]
+
+      updateMessageJSON(props.json?.messageId)
+
+      const input = {
+        type: INPUT.POSTBACK as InputType,
+        payload,
+      }
+      void sendInput(input)
+    }
+  }
+
+  const disabled = ratingValue === -1
+
+  return (
+    <div className='rating-message-container'>
+      <MessageBubble className='rating-message-bubble'>
+        {messageText}
+        <RatingSelector
+          color={color}
+          onRatingChange={ratingChanged}
+          ratingValue={ratingValue}
+          ratingType={ratingType}
+          valueSent={props.json?.valueSent}
+        />
+      </MessageBubble>
+      {!props.json?.valueSent && showRating && (
+        <Button
+          autodisable={true}
+          disabled={disabled}
+          onClick={handleButtonSend}
+        >
+          {buttonText}
+        </Button>
+      )}
+    </div>
+  )
+}
+
+export default customMessage({
+  name: 'custom-rating',
+  component: CustomRatingMessage,
+})

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

@@ -0,0 +1,59 @@
+import React, { useState } from 'react'
+
+import { Smileys } from './smileys'
+import { Stars } from './stars'
+import { RatingSelectorContainer } from './styles'
+import { RatingType } from './types'
+
+const NUMBER_OF_RATING_BUTTONS = 5
+interface RatingSelectorProps {
+  color: string
+  isSent?: boolean
+  onRatingChange: (newRating: number) => void
+  ratingValue: number
+  ratingType: RatingType
+  valueSent?: number
+}
+
+export const RatingSelector = ({
+  color,
+  isSent,
+  onRatingChange,
+  ratingValue,
+  ratingType,
+  valueSent,
+}: RatingSelectorProps) => {
+  const [hover, setHover] = useState<number>(valueSent ? valueSent : -1)
+
+  const onHover = (ratingNumber: number) => {
+    if (!valueSent) setHover(ratingNumber)
+  }
+
+  return (
+    <RatingSelectorContainer isSent={isSent}>
+      {Array.from({ length: NUMBER_OF_RATING_BUTTONS }, (_star, i) => {
+        const ratingNumber = i + 1
+
+        return (
+          <div
+            key={i}
+            onMouseEnter={() => onHover(ratingNumber)}
+            onMouseLeave={() => onHover(ratingValue)}
+            onClick={() => onRatingChange(ratingNumber)}
+          >
+            {ratingType === RatingType.Stars && (
+              <Stars color={color} ratingNumber={ratingNumber} hover={hover} />
+            )}
+            {ratingType === RatingType.Smileys && (
+              <Smileys
+                color={color}
+                ratingNumber={ratingNumber}
+                hover={hover}
+              />
+            )}
+          </div>
+        )
+      })}
+    </RatingSelectorContainer>
+  )
+}

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

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import {
+  FaceAngrySvg,
+  FaceFrownSvg,
+  FaceGrinBeamSvg,
+  FaceMehSvg,
+  FaceSmileSvg,
+} from './icons'
+import { RatingItemProps } from './types'
+
+const SMILEY_MAP = {
+  1: FaceAngrySvg,
+  2: FaceFrownSvg,
+  3: FaceMehSvg,
+  4: FaceSmileSvg,
+  5: FaceGrinBeamSvg,
+} as const
+
+export const Smileys = ({ color, ratingNumber, hover }: RatingItemProps) => {
+  const isSelected = hover === ratingNumber
+  const SmileyComponent = SMILEY_MAP[ratingNumber as keyof typeof SMILEY_MAP]
+
+  return SmileyComponent ? (
+    <SmileyComponent color={color} selected={isSelected} />
+  ) : null
+}

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+import { StarSvg } from './icons/index'
+import { RatingItemProps } from './types'
+
+export const Stars = ({ color, ratingNumber, hover }: RatingItemProps) => {
+  const isSelected = hover >= ratingNumber
+  return <StarSvg color={color} selected={isSelected} />
+}

package/src/webchat/custom-messages/rating/styles.ts

@@ -0,0 +1,26 @@
+import styled from 'styled-components'
+
+// TODO: Review how define all this styles
+export const MessageBubble = styled.div`
+  margin: 0px 0px 5px 0px;
+`
+
+interface RatingSelectorContainerProps {
+  isSent?: boolean
+}
+
+export const RatingSelectorContainer = styled.div<RatingSelectorContainerProps>`
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 16px;
+
+  & > div {
+    cursor: ${props => (props.isSent ? 'default' : 'pointer')};
+
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`

package/src/webchat/custom-messages/rating/types.ts

@@ -0,0 +1,15 @@
+export enum RatingType {
+  Stars = 'stars',
+  Smileys = 'smileys',
+}
+
+export interface RatingItemProps {
+  color: string
+  ratingNumber: number
+  hover: number
+}
+
+export interface RatingIconProps {
+  color: string
+  selected?: boolean
+}

package/src/webchat/index.ts

@@ -1,5 +1,6 @@
 // @ts-nocheck
 export { WebchatContext } from './context'
+export * from './custom-messages'
 export { Webchat } from './webchat'
 export { WebchatDev } from './webchat-dev'
 

package/src/webchat/input-panel/send-button.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 
 import SendButtonIcon from '../../assets/send-button.svg'
-import { ROLES, WEBCHAT } from '../../constants'
+import { ROLES } from '../../constants'
 import { WebchatContext } from '../../webchat/context'
 import { Icon } from '../components/common'
 import { ConditionalAnimation } from '../components/conditional-animation'