@botonic/react
Version:
Build Chatbots using React
57 lines • 2.92 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { INPUT } from '@botonic/core';
import merge from 'lodash.merge';
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, _c, _d, _e;
const { payloads, messageText, buttonText, ratingType } = props;
const { webchatState, updateMessage, 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(((_c = props.json) === null || _c === void 0 ? void 0 : _c.valueSent) ? props.json.valueSent : -1);
const [showRating, setShowRating] = useState(true);
const ratingChanged = (newRating) => {
setRatingValue(newRating);
};
const updateMessageJSON = (messageId) => {
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 = () => {
var _a;
if (ratingValue !== -1) {
setShowRating(false);
const payload = payloads[ratingValue - 1];
updateMessageJSON((_a = props.json) === null || _a === void 0 ? void 0 : _a.messageId);
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: (_d = props.json) === null || _d === void 0 ? void 0 : _d.valueSent })] })), !((_e = props.json) === null || _e === void 0 ? void 0 : _e.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