@botonic/react
Version:
Build Chatbots using React
42 lines • 2.21 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { INPUT } from '@botonic/core';
import { 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';
const CustomRatingMessage = props => {
var _a, _b;
const { payloads, messageText, buttonText, ratingType, id, valueSent } = props;
const { updateCustomMessageProps, sendInput } = useContext(WebchatContext);
const theme = useContext(ThemeContext);
const color = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.brand) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : '';
const [ratingValue, setRatingValue] = useState(valueSent ? valueSent : -1);
const [showRating, setShowRating] = useState(true);
const ratingChanged = (newRating) => {
setRatingValue(newRating);
};
const handleButtonSend = () => {
if (ratingValue === -1)
return;
const json = {
valueSent: ratingValue,
};
updateCustomMessageProps(json, id);
setShowRating(false);
const payload = payloads[ratingValue - 1];
const input = {
type: INPUT.POSTBACK,
payload,
};
void sendInput(input);
};
const disabled = ratingValue === -1;
return (_jsxs("div", Object.assign({ className: 'rating-message-container' }, { children: [_jsxs(MessageBubble, Object.assign({ className: 'rating-message-bubble' }, { children: [messageText, _jsx(RatingSelector, { color: color, onRatingChange: ratingChanged, ratingValue: ratingValue, ratingType: ratingType, valueSent: valueSent })] })), !(props === null || props === void 0 ? void 0 : props.valueSent) && showRating && (_jsx(Button, Object.assign({ autodisable: true, disabled: disabled, onClick: handleButtonSend }, { children: buttonText })))] })));
};
export default customMessage({
name: 'custom-rating',
component: CustomRatingMessage,
});
//# sourceMappingURL=index.js.map