@botonic/react
Version:
Build Chatbots using React
56 lines • 2.61 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@botonic/core");
const react_1 = require("react");
const styled_components_1 = require("styled-components");
const components_1 = require("../../../components");
const context_1 = require("../../context");
const rating_selector_1 = require("./rating-selector");
const styles_1 = require("./styles");
const types_1 = require("./types");
const ratingValues = {
[types_1.RatingType.Stars]: [
'⭐'.repeat(1),
'⭐'.repeat(2),
'⭐'.repeat(3),
'⭐'.repeat(4),
'⭐'.repeat(5),
],
[types_1.RatingType.Smileys]: ['😠', '🙁', '😐', '🙂', '😄'],
};
const CustomRatingMessage = props => {
const { payloads, messageText, buttonText, ratingType, id, valueSent } = props;
const { updateCustomMessageProps, sendInput } = (0, react_1.useContext)(context_1.WebchatContext);
const theme = (0, react_1.useContext)(styled_components_1.ThemeContext);
const color = theme?.brand?.color ?? '';
const [ratingValue, setRatingValue] = (0, react_1.useState)(valueSent ? valueSent : -1);
const [showRating, setShowRating] = (0, react_1.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: core_1.INPUT.POSTBACK,
payload,
referral: ratingValues[ratingType][ratingValue - 1],
};
void sendInput(input);
};
const disabled = ratingValue === -1;
return ((0, jsx_runtime_1.jsxs)("div", { className: 'rating-message-container', children: [(0, jsx_runtime_1.jsxs)(styles_1.MessageBubble, { className: 'rating-message-bubble', children: [messageText, (0, jsx_runtime_1.jsx)(rating_selector_1.RatingSelector, { color: color, onRatingChange: ratingChanged, ratingValue: ratingValue, ratingType: ratingType, valueSent: valueSent })] }), !props?.valueSent && showRating && ((0, jsx_runtime_1.jsx)(components_1.Button, { autodisable: true, disabled: disabled, onClick: handleButtonSend, children: buttonText }))] }));
};
exports.default = (0, components_1.customMessage)({
name: 'custom-rating',
component: CustomRatingMessage,
});
//# sourceMappingURL=index.js.map