we-insights-react-native
Version:
[we-insights] is a powerful utility library designed to streamline data collection processes for WeApp employees. It simplifies the process of gathering, storing, and managing data within WeApp projects, making it an invaluable tool for enhancing efficien
231 lines (230 loc) • 8.76 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.FeedbackForm = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _Button = require("./Button");
var _Rating = require("./Rating");
var _Input = require("./Input");
var _ContactPermissionCheckbox = require("./ContactPermissionCheckbox");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const {
width
} = _reactNative.Dimensions.get('window');
const defaultStyle = {
backgroundColor: '#212431',
textColor: '#ffffff',
primaryFont: 'Arial',
secondaryFont: 'Arial',
buttonsStyle: {
primaryButtonBackgroundColor: '#FDA783',
primaryButtonTextColor: '#2D3142',
secondaryButtonBackgroundColor: '#212431',
secondaryButtonTextColor: '#ffffff'
},
inputStyle: {
backgroundColor: '#2D3142',
textColor: '#ffffff',
borderColor: '#414762'
},
checkboxStyle: {
checkedBorderColor: '#FDA783',
uncheckedBorderColor: '#414762',
checkedBackgroundColor: '#FDA783',
uncheckedBackgroundColor: '#2D3142',
checkmarkColor: '#2D3142',
textColor: '#ffffff'
},
ratingBoxStyle: {
backgroundColor: '#CDD0DC',
textColor: '#000000',
iconTextColor: '#2D3142',
fontFamily: 'Arial'
}
};
const defaultTranslations = {
en: {
title: 'We value your feedback',
description: 'Help us improve your experience!',
feedbackQuestion: 'What do you like most about {projectName}? Is there anything you feel is missing or could be improved?',
feedbackPlaceholder: 'Your Feedback',
emailPlaceholder: 'Email Address',
sendButton: 'Send',
skipButton: 'Skip',
satisfactionQuestion: 'How satisfied are you with ',
answerFurtherQuestions: 'I will gladly answer further questions through email',
ratingTranslations: {
one: 'Not Satisfied at all',
two: 'Not very Satisfied',
three: 'Neutral',
four: 'Satisfied',
five: 'Very Satisfied'
}
},
sv: {
title: 'Vi värdesätter din feedback',
description: 'Hjälp oss göra din upplevelse bättre!',
feedbackQuestion: 'Vad gillar du mest med {projectName}? Är det något du tycker saknas eller hade kunnat förbättras?',
feedbackPlaceholder: 'Feedback',
emailPlaceholder: 'Email',
sendButton: 'Skicka',
skipButton: 'Skippa',
satisfactionQuestion: 'Hur nöjd är du med ',
answerFurtherQuestions: 'Jag svarar gärna på fler frågor via email.',
ratingTranslations: {
one: 'Inte alls Nöjd',
two: 'Inte så Nöjd',
three: 'Neutral',
four: 'Nöjd',
five: 'Väldigt Nöjd'
}
}
};
const FeedbackForm = ({
style = defaultStyle,
onSend,
onSkip,
email,
projectName,
language = 'sv',
customTranslations,
customIcons
}) => {
const [selectedIconIndex, setSelectedIconIndex] = (0, _react.useState)(null);
const [feedbackText, setFeedbackText] = (0, _react.useState)('');
const [contactEmail, setContactEmail] = (0, _react.useState)(email || '');
const [contactPermission, setContactPermission] = (0, _react.useState)(false);
const [userDidSkip, setUserDidSkip] = (0, _react.useState)(false);
const translations = {
...defaultTranslations[language],
...customTranslations
};
const styles = _reactNative.StyleSheet.create({
modal: {
backgroundColor: style.backgroundColor,
fontFamily: style.primaryFont,
position: 'absolute',
justifyContent: 'center',
height: '100%',
width: width
},
margin: {
marginLeft: 8,
marginRight: 8
},
title: {
color: style.textColor,
fontFamily: style.primaryFont,
fontSize: 32,
lineHeight: 32,
marginLeft: 8,
marginRight: 8,
marginTop: 16,
fontWeight: '600'
},
text: {
color: style.textColor,
fontFamily: style.secondaryFont,
fontSize: 16,
lineHeight: 22,
margin: 8
},
gap: {
height: 8
},
inputPlaceholderGap: {
height: 60
}
});
const handleOnSend = () => {
//TODO: Call the useInsights hook
onSend === null || onSend === void 0 || onSend();
};
const handleOnSkip = () => {
setUserDidSkip(true);
onSkip === null || onSkip === void 0 || onSkip();
};
if (userDidSkip) return null;
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.modal
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.margin
}, /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, null, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: styles.title
}, translations.title), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: styles.text
}, translations.description), /*#__PURE__*/_react.default.createElement(_Rating.Rating, {
projectName: projectName,
selectedIconIndex: selectedIconIndex,
setSelectedIconIndex: setSelectedIconIndex,
translations: translations,
isCustomTranslation: !!customTranslations,
customIcons: customIcons,
style: {
backgroundColor: style.ratingBoxStyle.backgroundColor,
textColor: style.ratingBoxStyle.textColor,
iconTextColor: style.ratingBoxStyle.iconTextColor,
primaryFont: style.ratingBoxStyle.fontFamily,
secondaryFont: style.ratingBoxStyle.fontFamily
}
}), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: styles.text
}, customTranslations ? customTranslations.feedbackQuestion : translations.feedbackQuestion.replace('{projectName}', projectName)), /*#__PURE__*/_react.default.createElement(_Input.Input, {
onChangeText: text => setFeedbackText(text),
value: feedbackText,
multiline: true,
placeholder: translations.feedbackPlaceholder,
style: {
backgroundColor: style.inputStyle.backgroundColor,
textColor: style.inputStyle.textColor,
borderColor: style.inputStyle.borderColor
}
}), /*#__PURE__*/_react.default.createElement(_ContactPermissionCheckbox.ContactPermissionCheckbox, {
isChecked: contactPermission,
onChangeCheck: value => setContactPermission(value),
style: {
checkedBorderColor: style.checkboxStyle.checkedBorderColor,
uncheckedBorderColor: style.checkboxStyle.uncheckedBorderColor,
checkedBackgroundColor: style.checkboxStyle.checkedBackgroundColor,
uncheckedBackgroundColor: style.checkboxStyle.uncheckedBackgroundColor,
checkmarkColor: style.checkboxStyle.checkmarkColor,
textColor: style.checkboxStyle.textColor,
fontFamily: style.secondaryFont
},
translations: translations
}), !contactPermission && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.inputPlaceholderGap
}), contactPermission && /*#__PURE__*/_react.default.createElement(_Input.Input, {
onChangeText: value => setContactEmail(value),
value: contactEmail,
placeholder: translations.emailPlaceholder,
style: {
backgroundColor: style.inputStyle.backgroundColor,
textColor: style.inputStyle.textColor,
borderColor: style.inputStyle.borderColor,
fontFamily: style.primaryFont
}
}), /*#__PURE__*/_react.default.createElement(_Button.Button, {
text: translations.sendButton,
onPress: handleOnSend,
style: {
backgroundColor: style.buttonsStyle.primaryButtonBackgroundColor,
textColor: style.buttonsStyle.primaryButtonTextColor
}
}), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.gap
}), /*#__PURE__*/_react.default.createElement(_Button.Button, {
text: translations.skipButton,
onPress: handleOnSkip,
style: {
backgroundColor: style.buttonsStyle.secondaryButtonBackgroundColor,
textColor: style.buttonsStyle.secondaryButtonTextColor,
fontFamily: style.primaryFont
}
}))));
};
exports.FeedbackForm = FeedbackForm;
//# sourceMappingURL=FeedbackForm.js.map