@botonic/react
Version:
Build Chatbots using React
60 lines • 3.29 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@botonic/core");
const lodash_merge_1 = tslib_1.__importDefault(require("lodash.merge"));
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 CustomRatingMessage = props => {
var _a, _b, _c, _d, _e;
const { payloads, messageText, buttonText, ratingType } = props;
const { webchatState, updateMessage, sendInput } = (0, react_1.useContext)(context_1.WebchatContext);
const theme = (0, react_1.useContext)(styled_components_1.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] = (0, react_1.useState)(((_c = props.json) === null || _c === void 0 ? void 0 : _c.valueSent) ? props.json.valueSent : -1);
const [showRating, setShowRating] = (0, react_1.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 = (0, lodash_merge_1.default)(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: core_1.INPUT.POSTBACK,
payload,
};
void sendInput(input);
}
};
const disabled = ratingValue === -1;
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'rating-message-container' }, { children: [(0, jsx_runtime_1.jsxs)(styles_1.MessageBubble, Object.assign({ className: 'rating-message-bubble' }, { children: [messageText, (0, jsx_runtime_1.jsx)(rating_selector_1.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 && ((0, jsx_runtime_1.jsx)(components_1.Button, Object.assign({ autodisable: true, disabled: disabled, onClick: handleButtonSend }, { children: buttonText })))] })));
};
exports.default = (0, components_1.customMessage)({
name: 'custom-rating',
component: CustomRatingMessage,
});
//# sourceMappingURL=index.js.map