@mopinion/survey
Version:
Collect customer feedback with the Mopinion survey library
172 lines (171 loc) • 6.82 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = Conversation;
var _preact = require("preact");
var _hooks = require("preact/hooks");
var _constants = require("../../../constants");
var _elements = require("../../elements");
var _utils = require("../../../utils");
var _form = require("../../form");
var _useConversation2 = _interopRequireDefault(require("../hooks/useConversation"));
var _Message = _interopRequireDefault(require("./Message"));
var _Delay = _interopRequireDefault(require("./Delay"));
var _BlockInput = _interopRequireDefault(require("./BlockInput"));
var _excluded = ["formHeaderHeight", "formOffset"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
var honeyBotBlock = {
typeName: _constants.honeyBotTypeName,
pageNumber: 0,
title: 'What is your opinion?'
};
function getPreviousNoInputBlocks(_ref) {
var index = _ref.index,
blockState = _ref.blockState,
blocks = _ref.blocks,
displayedBlocks = _ref.displayedBlocks;
var slicedLayout = displayedBlocks.slice(0, index).reverse();
var counter = 0;
for (var i = 0; i < slicedLayout.length; i++) {
var blockId = slicedLayout[i];
var block = blocks[blockId];
var state = blockState[blockId];
if (state.isVisible && (_constants.noInputBlocks.indexOf(block.typeName) > -1 || state.wasPrefilled)) {
counter++;
} else {
break;
}
}
return counter;
}
function determineContainerStyles() {
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
webView = _ref2.webView,
webViewShowHeader = _ref2.webViewShowHeader,
formHeaderHeight = _ref2.formHeaderHeight,
formOffset = _ref2.formOffset;
if (webView && webViewShowHeader) {
return {
height: webViewShowHeader ? "calc(100dvh - ".concat(formHeaderHeight + formOffset, "px)") : '100dvh'
};
}
if (webView) {
return null;
}
return {
maxHeight: (0, _utils.isLandingPage)() ? '640px' : '520px',
height: "calc(80vh - ".concat(formHeaderHeight + formOffset, "px)")
};
}
function Conversation(_ref3) {
var _properties$typingTim;
var formHeaderHeight = _ref3.formHeaderHeight,
formOffset = _ref3.formOffset,
props = _objectWithoutProperties(_ref3, _excluded);
var blockState = (0, _form.useBlockStore)();
var _useFormStore = (0, _form.useFormStore)(),
formType = _useFormStore.formType,
formOpen = _useFormStore.formOpen;
var _useFormProps = (0, _form.useFormProps)(),
webView = _useFormProps.webView,
webViewShowHeader = _useFormProps.webViewShowHeader;
var _useConfigStore = (0, _form.useConfigStore)(),
layout = _useConfigStore.layout,
blocks = _useConfigStore.blocks,
properties = _useConfigStore.properties;
var _useConversation = (0, _useConversation2["default"])(),
displayedBlocks = _useConversation.displayedBlocks,
showableLayout = _useConversation.showableLayout;
var container = (0, _hooks.useRef)(null);
var setScrollPosition = (0, _hooks.useCallback)(function () {
if (container.current) {
container.current.scrollTop = container.current.scrollHeight;
}
}, []);
var _id = (0, _hooks.useRef)((0, _utils.rnd)());
(0, _hooks.useEffect)(function () {
var listener = function listener() {
setTimeout(function () {
try {
container.current.scrollTop = document.activeElement.getBoundingClientRect().top;
} catch (e) {}
});
};
if (webView && window.visualViewport) {
window.visualViewport.addEventListener('resize', listener);
return function () {
return window.visualViewport.removeEventListener('resize', listener);
};
}
}, [webView]);
var startConversation = formOpen || formType === 'embed';
var nextMessageDelay = Number((_properties$typingTim = properties.typingTimeout) !== null && _properties$typingTim !== void 0 ? _properties$typingTim : _constants.typingTimeout) * 1.2;
return (0, _preact.h)(_preact.Fragment, null, (0, _preact.h)("div", {
className: (0, _utils.makeClassName)('conversation-container', webView ? 'webview' : null),
ref: container,
style: determineContainerStyles({
webView: webView,
webViewShowHeader: webViewShowHeader,
formHeaderHeight: formHeaderHeight,
formOffset: formOffset
})
}, displayedBlocks.map(function (blockId, elementIndex) {
var delay = getPreviousNoInputBlocks({
index: elementIndex,
blockState: blockState,
blocks: blocks,
displayedBlocks: displayedBlocks,
layout: showableLayout
}) * nextMessageDelay;
return (0, _preact.h)(_Delay["default"], {
delay: startConversation ? delay : null
}, (0, _preact.h)(_Message["default"], {
blockId: blockId,
prevBlockId: elementIndex !== 0 ? showableLayout[elementIndex - 1] : null,
elementIndex: elementIndex,
setScrollPosition: setScrollPosition
}));
})), layout.filter(function (blockId) {
return blocks[blockId].typeName === 'website_data';
}).map(function (websiteDataBlockId) {
var state = blockState[websiteDataBlockId];
var block = blocks[websiteDataBlockId];
var setNestedValue = function setNestedValue(datafieldId, value) {
return blockState.actions.dispatch({
type: 'set_nested_value',
payload: {
value: value,
block: block,
datafieldId: datafieldId,
rules: [],
layout: layout
}
});
};
return (0, _preact.h)(_elements.ExternalData, {
block: block,
state: state,
setNestedValue: setNestedValue
});
}), (0, _preact.h)("div", {
className: _constants.honeyBotTypeName
}, (0, _preact.h)("label", {
"for": "element-special_input-".concat(blockState[_constants.honeyBotId].id, "-").concat(_id.current)
}, honeyBotBlock.title), (0, _preact.h)(_BlockInput["default"], {
block: honeyBotBlock,
state: blockState[_constants.honeyBotId],
_id: _id.current,
setHoneyBotValue: function setHoneyBotValue(value) {
return blockState.actions.dispatch({
type: 'set_honeybot_value',
payload: {
value: value
}
});
}
})));
}
//# sourceMappingURL=Conversation.js.map