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
222 lines • 7.46 kB
JavaScript
import React, { useState } from 'react';
import { ScrollView, View, Text, StyleSheet, Dimensions } from 'react-native';
import { Button } from './Button';
import { Rating } from './Rating';
import { Input } from './Input';
import { ContactPermissionCheckbox } from './ContactPermissionCheckbox';
const {
width
} = 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'
}
}
};
export const FeedbackForm = ({
style = defaultStyle,
onSend,
onSkip,
email,
projectName,
language = 'sv',
customTranslations,
customIcons
}) => {
const [selectedIconIndex, setSelectedIconIndex] = useState(null);
const [feedbackText, setFeedbackText] = useState('');
const [contactEmail, setContactEmail] = useState(email || '');
const [contactPermission, setContactPermission] = useState(false);
const [userDidSkip, setUserDidSkip] = useState(false);
const translations = {
...defaultTranslations[language],
...customTranslations
};
const styles = 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.createElement(View, {
style: styles.modal
}, /*#__PURE__*/React.createElement(View, {
style: styles.margin
}, /*#__PURE__*/React.createElement(ScrollView, null, /*#__PURE__*/React.createElement(Text, {
style: styles.title
}, translations.title), /*#__PURE__*/React.createElement(Text, {
style: styles.text
}, translations.description), /*#__PURE__*/React.createElement(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.createElement(Text, {
style: styles.text
}, customTranslations ? customTranslations.feedbackQuestion : translations.feedbackQuestion.replace('{projectName}', projectName)), /*#__PURE__*/React.createElement(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.createElement(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.createElement(View, {
style: styles.inputPlaceholderGap
}), contactPermission && /*#__PURE__*/React.createElement(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.createElement(Button, {
text: translations.sendButton,
onPress: handleOnSend,
style: {
backgroundColor: style.buttonsStyle.primaryButtonBackgroundColor,
textColor: style.buttonsStyle.primaryButtonTextColor
}
}), /*#__PURE__*/React.createElement(View, {
style: styles.gap
}), /*#__PURE__*/React.createElement(Button, {
text: translations.skipButton,
onPress: handleOnSkip,
style: {
backgroundColor: style.buttonsStyle.secondaryButtonBackgroundColor,
textColor: style.buttonsStyle.secondaryButtonTextColor,
fontFamily: style.primaryFont
}
}))));
};
//# sourceMappingURL=FeedbackForm.js.map