react-native-blitzllama-mmkv
Version:
Blitzllama React Native Library with mmkv
921 lines (910 loc) • 39.7 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable react-native/no-inline-styles */
const React = __importStar(require("react"));
const react_native_1 = require("react-native");
const index_1 = __importDefault(require("./CheckBox/index"));
const apiCall_1 = require("../apiCall");
const utils_1 = require("../utils");
const nps_color = {
red: '#ff8e8e',
yellow: '#ffe177',
green: '#6dffb0',
};
const getOptionBgColor = (question_type, question_variant, option_no, backgroundColor) => {
if (question_type === 'nps_feedback' && question_variant === 'colourised') {
if (option_no <= 6) {
return nps_color.red;
}
else if (option_no === 7 || option_no === 8) {
return nps_color.yellow;
}
else if (option_no === 9 || option_no === 10) {
return nps_color.green;
}
}
return backgroundColor;
};
const toggle_data = (question_type) => question_type === 'scale_feedback' ||
question_type === 'star_feedback' ||
question_type === 'emoji_feedback'
? [1, 2, 3, 4, 5]
: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const toggle_width = (question_type) => question_type === 'scale_feedback' ||
question_type === 'star_feedback' ||
question_type === 'emoji_feedback'
? '20%'
: '9.09%';
const SurveyModal = (props) => {
const [surveyData, setSurveyData] = React.useState();
const [activeQuestion, setActiveQuestion] = React.useState();
const [surveyInput, setSurveyInput] = React.useState('');
const [thanks, setThanks] = React.useState(false);
const [options, setOptions] = React.useState([]);
const [isComplete, setComplete] = React.useState(false);
const [progressBarWidth, setProgressBarWidth] = React.useState(0);
const [currentStarValue, setCurrentStarValue] = React.useState(0);
const [selectedValue, setSelectedValue] = React.useState(-1);
const [selectedOption, setSelectedOption] = React.useState(-1);
const [surveyResults, setSurveyResults] = React.useState([]);
const [answeredQuestion, setAnsweredQuestion] = React.useState(false);
const [showProgressBar, toggleProgressBar] = React.useState(false);
const [customFont, setCustomFont] = React.useState('');
const [customBoldFont, setCustomBoldFont] = React.useState('');
const [responseTime, setResponseTime] = React.useState(0);
const [errorMessage, setErrorMessage] = React.useState('');
const btn_qtns = [
'input_feedback',
'data_collection',
'multi_select_feedback',
'single_select_feedback',
'intro_prompt',
];
const surveyDetails = async (triggerName, properties) => {
const result = await (0, apiCall_1._fetchSurvey)(triggerName, properties);
if (result && result.message) {
react_native_1.DeviceEventEmitter.emit('survey_displayed', {
trigger: triggerName,
can_display_survey: false,
});
}
if (result && result.data && result.data.survey) {
const { survey } = result.data;
if (survey) {
react_native_1.DeviceEventEmitter.emit('survey_displayed', {
trigger: triggerName,
can_display_survey: true,
});
const delay = survey.trigger_delay ? survey.trigger_delay * 1000 : 0;
setTimeout(async () => {
const check_survey = await (0, utils_1.getData)('@blitz_survey_live');
if (!check_survey) {
await (0, utils_1.storeData)('@blitz_survey_live', 'true');
const storedFont = await (0, utils_1.getData)('@blitz_custom_font');
if (storedFont) {
setCustomFont(storedFont);
}
const storedBoldFont = await (0, utils_1.getData)('@blitz_custom_bold_font');
if (storedBoldFont) {
setCustomBoldFont(storedBoldFont);
}
setSurveyData(result.data);
setActiveQuestion(result.data.questions[0]);
if (result.data.questions && result.data.questions.length > 1) {
toggleProgressBar(true);
}
await (0, apiCall_1._showSurvey)({
survey_id: survey.survey_id,
group_id: survey.group_id,
});
}
}, delay);
}
}
};
React.useEffect(() => {
if (props && props.trigger) {
let properties = {};
if (props.event_properties &&
typeof props.event_properties === 'object') {
properties = props.event_properties;
}
surveyDetails(props.trigger, properties);
}
}, [props, props.trigger]);
React.useEffect(() => {
if (activeQuestion) {
setAnsweredQuestion(false);
setCurrentStarValue(0);
setSelectedOption(-1);
setSelectedValue(-1);
setResponseTime(new Date().getTime());
}
}, [activeQuestion]);
if (!surveyData || !activeQuestion) {
return null;
}
const { survey, questions } = surveyData;
const { show_thanks_card, thanks_card_title, thanks_card_desc, survey_theme, group_id, placeholder, is_dismissible, show_blitz_logo, lang_code, show_progress_bar, cta_full_width, } = survey;
// if the multiselect options are already selected or not
const checkIfExists = (idx) => {
return options.some(o => o._id === idx);
};
// handle select options
const toggleOptions = (option_text, _id, order, has_text_input, key) => {
if (question_type === 'multi_select_feedback') {
if (checkIfExists(_id)) {
const activeOptions = options.filter(o => o._id !== _id);
setOptions([...activeOptions]);
}
else {
options.push({ option_text, _id, order, has_text_input });
options.sort((a, b) => a.order - b.order);
setOptions([...options]);
}
}
else {
setSelectedOption(key);
setOptions([{ option_text, _id, order, has_text_input }]);
}
};
// handle next survey screen and rule sets
const surveyNextScreen = async (question_type, choice) => {
let response;
let field_name = '';
switch (question_type) {
case 'input_feedback':
case 'data_collection':
field_name = 'survey_input';
response = surveyInput ? surveyInput : '';
break;
case 'intro_prompt':
field_name = 'intro_prompt';
response = '';
break;
case 'scale_feedback':
case 'nps_feedback':
case 'star_feedback':
case 'emoji_feedback':
field_name = 'scale_value';
response = choice;
break;
case 'single_select_feedback':
case 'multi_select_feedback':
field_name = 'responses';
response = options;
setTimeout(() => {
setOptions([]);
}, 300);
break;
default:
return;
}
const { rule_sets, question_order, question_id, question_text, validations, is_mandatory, } = activeQuestion;
if (question_type === 'data_collection') {
const { goto_next, message } = (0, utils_1.validateDataField)(surveyInput, validations, is_mandatory);
if (!goto_next) {
setErrorMessage(message);
setTimeout(() => {
setErrorMessage('');
}, 3000);
return;
}
}
let last_response_complete = false;
let skip_value;
let final_survey_results = surveyResults;
if (response !== undefined) {
final_survey_results = [
...surveyResults,
{
question_order,
question_text,
response: (0, utils_1.formatResponses)(question_type, response),
question_type,
},
];
setSurveyResults(final_survey_results);
const user_response = { [field_name]: response };
if ((question_type === 'multi_select_feedback' ||
question_type === 'single_select_feedback') &&
surveyInput.length > 0) {
user_response.survey_input = surveyInput;
}
const results = await (0, apiCall_1._submitResponse)({
survey_id: survey.survey_id,
question_id,
question_order,
question_type,
group_id,
trigger: props.trigger,
platform: react_native_1.Platform.OS,
response_duration: new Date().getTime() - responseTime,
...user_response,
});
if (rule_sets && rule_sets.length > 0) {
skip_value = (0, utils_1.questRules)(question_type, rule_sets, question_order, response, response, surveyInput);
}
if (skip_value && skip_value > 0) {
setProgressBarWidth((skip_value - 1) * (100 / questions.length));
}
else {
setProgressBarWidth(activeQuestion.question_order * (100 / questions.length));
}
if (results && results.data && results.data.valid_response) {
setComplete(true);
last_response_complete = true;
}
}
if (rule_sets && rule_sets.length > 0) {
const jump_to = (0, utils_1.questRules)(question_type, rule_sets, question_order, response, response, surveyInput);
if (jump_to === -1) {
if (last_response_complete || isComplete) {
setProgressBarWidth(100);
await (0, apiCall_1._markComplete)({ survey_id: survey.survey_id, group_id });
react_native_1.DeviceEventEmitter.emit('survey_completed', final_survey_results);
}
await (0, utils_1.deleteData)('@blitz_survey_live');
if (show_thanks_card) {
setThanks(true);
setTimeout(() => props.setModalVisible(false), 2000);
}
else {
setTimeout(() => props.setModalVisible(false), 500);
}
return;
}
const jump_question_value = questions.find(q => q.question_order === jump_to);
if (jump_question_value) {
setSurveyInput('');
setOptions([]);
setActiveQuestion(jump_question_value);
}
}
else {
const question_value = questions.find(q => q.question_order === activeQuestion.question_order + 1);
if (question_value) {
setSurveyInput('');
setOptions([]);
setActiveQuestion(question_value);
}
if (activeQuestion.question_order === questions.length) {
if (last_response_complete || isComplete) {
setProgressBarWidth(100);
await (0, apiCall_1._markComplete)({ survey_id: survey.survey_id, group_id });
react_native_1.DeviceEventEmitter.emit('survey_completed', final_survey_results);
}
await (0, utils_1.deleteData)('@blitz_survey_live');
if (show_thanks_card) {
setThanks(true);
setTimeout(() => props.setModalVisible(false), 2000);
}
else {
setTimeout(() => props.setModalVisible(false), 500);
}
return;
}
}
};
const openCtaLink = async () => {
if (cta_link) {
await react_native_1.Linking.openURL(`${cta_link}`);
}
surveyNextScreen(question_type, '');
};
const handleDismissSurvey = async () => {
await (0, apiCall_1._dismissSurvey)({ survey_id: survey.survey_id, group_id });
await (0, utils_1.deleteData)('@blitz_survey_live');
props.setModalVisible(false);
};
const CustomText = (
// eslint-disable-next-line @typescript-eslint/no-shadow
props) => {
const style = customFont
? [{ fontFamily: customFont }, props.style]
: [props.style];
return (<react_native_1.Text {...props} style={style}>
{props.children}
</react_native_1.Text>);
};
// eslint-disable-next-line @typescript-eslint/no-shadow
const CustomBoldText = (props) => {
if (customBoldFont &&
props &&
props.style &&
props.style.length > 0 &&
props.style[0]) {
const style_item = props.style[0];
if (style_item.fontWeight) {
delete style_item.fontWeight;
}
}
const style = customBoldFont
? [props.style, { fontFamily: customBoldFont }]
: [props.style];
return (<react_native_1.Text {...props} style={style}>
{props.children}
</react_native_1.Text>);
};
const { question_img, question_type, question_text, question_desc, question_variant, properties, cta_link, cta_text, is_mandatory, } = activeQuestion;
const checkIfSubmitAllowed = () => {
if (question_type === 'single_select_feedback' && options.length === 0) {
return true;
}
if (question_type === 'multi_select_feedback' ||
question_type === 'single_select_feedback') {
if (options.some(o => o.has_text_input) && surveyInput.length === 0) {
return true;
}
}
return (is_mandatory &&
((question_type === 'multi_select_feedback' && options.length === 0) ||
((question_type === 'input_feedback' ||
question_type === 'data_collection') &&
surveyInput.length === 0)));
};
return (<react_native_1.Modal transparent={true} visible={props.modalVisible} style={{ zIndex: 9999 }}>
<react_native_1.KeyboardAvoidingView behavior={react_native_1.Platform.OS === 'ios' ? 'padding' : 'height'} style={{ flex: 1 }}>
<react_native_1.View style={styles.centeredView}>
{!thanks ? (<react_native_1.View style={[
styles.modalView,
{ backgroundColor: `${survey_theme.bg_color}` },
]}>
<react_native_1.ScrollView style={{ position: 'relative' }} keyboardShouldPersistTaps="always">
{is_dismissible && (<react_native_1.View style={[styles.imgContainer, { zIndex: 10000 }]}>
<react_native_1.Pressable onPress={() => handleDismissSurvey()} hitSlop={{
top: 12,
bottom: 12,
left: 12,
right: 12,
}}>
<react_native_1.View style={{
padding: 10,
zIndex: 10001,
}}>
<react_native_1.Image source={{
uri: 'https://cdn.blitzllama.com/default/close.png',
}} style={styles.deleteImg}/>
</react_native_1.View>
</react_native_1.Pressable>
</react_native_1.View>)}
{question_img ? (<react_native_1.View style={styles.questionImgContainer}>
<react_native_1.Image source={{
uri: `${question_img}`,
}} style={styles.questionImg} resizeMode={'contain'}/>
</react_native_1.View>) : (<react_native_1.Text></react_native_1.Text>)}
<react_native_1.View style={{
paddingTop: question_img ? 20 : 30,
paddingBottom: 20,
paddingHorizontal: 30,
}}>
<react_native_1.View>
<CustomBoldText style={[
styles.questionTitle,
{
color: `${survey_theme?.text_color}`,
textAlign: (0, utils_1.isRtl)(lang_code) ? 'right' : 'left',
},
]}>
{is_mandatory &&
question_type === 'multi_select_feedback' && (<react_native_1.Text style={{ color: '#FF1B1B' }}>*</react_native_1.Text>)}
{question_text}
</CustomBoldText>
{question_desc ? (<CustomText style={[
styles.questionSubTitle,
{
color: `${survey_theme?.secondary_text_color}80`,
textAlign: (0, utils_1.isRtl)(lang_code) ? 'right' : 'left',
},
]}>
{question_desc}
</CustomText>) : (<react_native_1.Text></react_native_1.Text>)}
{(question_type === 'single_select_feedback' ||
question_type === 'multi_select_feedback') && (<react_native_1.View>
{properties &&
properties?.options &&
properties?.options.map(({ option_text, _id, order, has_text_input = false }, key) => (<react_native_1.Pressable key={key} style={[
styles.selectOption,
(option_text && checkIfExists(_id)) ||
selectedOption === key
? {
backgroundColor: `${survey_theme?.selected_option_bg_color}1A`,
borderWidth: 1,
borderColor: `${survey_theme?.selected_border_color}`,
}
: {
backgroundColor: `${survey_theme?.option_bg_color}CC`,
borderWidth: 1,
borderColor: `${survey_theme?.border_color}`,
},
]} onPress={() => {
toggleOptions(option_text, _id, order, has_text_input, key);
}}>
<react_native_1.View style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
flexWrap: 'wrap',
}}>
<react_native_1.View>
<index_1.default checkedCheckBoxColor={`${survey_theme?.selected_radio_button_color}`} uncheckedCheckBoxColor={`${survey_theme?.radio_button_color}73`} onClick={() => {
toggleOptions(option_text, _id, order, has_text_input, key);
}} style={[
{
transform: [
{ scaleX: 0.7 },
{ scaleY: 0.7 },
],
},
{ alignSelf: 'center' },
]} isChecked={checkIfExists(_id) ||
selectedOption === key}/>
</react_native_1.View>
<CustomBoldText style={[
styles.optionText,
{
color: (option_text && checkIfExists(_id)) ||
selectedOption === key
? `${survey_theme?.selected_text_color}`
: `${survey_theme?.text_color}`,
textAlign: (0, utils_1.isRtl)(lang_code)
? 'right'
: 'left',
},
react_native_1.Platform.OS === 'ios'
? { marginTop: 4 }
: { marginTop: 2 },
]}>
{option_text}
</CustomBoldText>
{checkIfExists(_id) && has_text_input && (<react_native_1.View style={{ flexBasis: '100%' }}>
<react_native_1.TextInput editable multiline numberOfLines={2} placeholder={'Please specify'} placeholderTextColor={`${survey_theme?.text_color}99`} value={surveyInput} onChangeText={text => setSurveyInput(text)} style={[
styles.inputText,
{
backgroundColor: `${survey_theme?.input_background_color}CC`,
borderWidth: 1,
borderColor: `${survey_theme?.input_border_color}80`,
color: `${survey_theme?.text_color}`,
textAlign: (0, utils_1.isRtl)(lang_code)
? 'right'
: 'left',
fontFamily: customFont
? customFont
: '',
height: 60,
width: 'auto',
},
]}/>
</react_native_1.View>)}
</react_native_1.View>
</react_native_1.Pressable>))}
</react_native_1.View>)}
{(question_type === 'scale_feedback' ||
question_type === 'nps_feedback') && (<react_native_1.View>
<react_native_1.View style={[
styles.toggleButtonGroup,
{ borderColor: `${survey_theme.range_border_color}` },
]}>
{toggle_data(question_type).map((item, idx) => (<react_native_1.Pressable key={idx} onPress={() => {
setSelectedValue(item);
setTimeout(() => {
surveyNextScreen(question_type, item);
}, 500);
}} style={[
styles.toggleButton,
{
backgroundColor: selectedValue === item
? `${survey_theme?.selected_range_higlight_color}26`
: getOptionBgColor(question_type, question_variant, item, survey_theme?.range_background_color),
},
idx === toggle_data(question_type).length - 1
? {
borderRightWidth: 0,
borderTopRightRadius: 5,
borderBottomRightRadius: 5,
width: toggle_width(question_type),
}
: idx === 0
? {
borderRightWidth: 1,
borderColor: `${survey_theme?.range_border_color}`,
borderTopLeftRadius: 5,
borderBottomLeftRadius: 5,
width: toggle_width(question_type),
}
: {
borderRightWidth: 1,
borderColor: `${survey_theme?.range_border_color}`,
width: toggle_width(question_type),
},
]}>
<CustomBoldText style={[
styles.numberText,
{
color: selectedValue === item
? `${survey_theme?.selected_range_higlight_color}`
: `${survey_theme?.text_color}`,
},
]}>
{item}
</CustomBoldText>
</react_native_1.Pressable>))}
</react_native_1.View>
<react_native_1.View style={styles.npsTextBox}>
<CustomText style={[
styles.npsText,
{
color: `${survey_theme?.text_color}80`,
},
]}>
{properties.labels?.left}
</CustomText>
<CustomText style={[
styles.npsText,
{
color: `${survey_theme?.text_color}80`,
},
]}>
{properties.labels?.right}
</CustomText>
</react_native_1.View>
</react_native_1.View>)}
{question_type === 'star_feedback' && (<react_native_1.View style={{
flexDirection: 'row',
alignItems: 'center',
}}>
{toggle_data(question_type).map((item, idx) => (<react_native_1.Pressable key={idx} onPress={() => {
setCurrentStarValue(idx + 1);
setTimeout(() => {
surveyNextScreen(question_type, item);
}, 500);
}} style={{
width: toggle_width(question_type),
}}>
{currentStarValue > idx ? (<react_native_1.Image style={{ width: 45, height: 45 }} source={{
uri: 'https://cdn.blitzllama.com/survey/assets/star_fill.png',
}} resizeMode="cover"/>) : (<react_native_1.Image style={{ width: 45, height: 45 }} source={{
uri: 'https://cdn.blitzllama.com/survey/assets/star_unfill.png',
}} resizeMode="cover"/>)}
</react_native_1.Pressable>))}
</react_native_1.View>)}
{question_type === 'emoji_feedback' && (<react_native_1.View style={{
flexDirection: 'row',
alignItems: 'center',
}}>
{toggle_data(question_type).map((item, idx) => (<react_native_1.Pressable key={idx} onPress={() => {
setAnsweredQuestion(true);
setCurrentStarValue(idx + 1);
setTimeout(() => {
surveyNextScreen(question_type, item);
}, 500);
}} style={{
width: toggle_width(question_type),
}}>
<react_native_1.Image style={answeredQuestion && currentStarValue !== idx + 1
? { opacity: 0.3, width: 45, height: 45 }
: answeredQuestion &&
currentStarValue === idx + 1
? { width: 54, height: 54 }
: { width: 45, height: 45 }} source={{
uri: `https://cdn.blitzllama.com/survey/assets/emoji-${idx + 1}.png`,
}} resizeMode="cover"/>
</react_native_1.Pressable>))}
</react_native_1.View>)}
{(question_type === 'input_feedback' ||
question_type === 'data_collection') && (<react_native_1.TextInput editable multiline numberOfLines={question_type === 'data_collection' ? 2 : 3} placeholder={activeQuestion.placeholder
? activeQuestion.placeholder
: placeholder} placeholderTextColor={`${survey_theme?.text_color}99`} value={surveyInput} onChangeText={text => setSurveyInput(text)} style={[
styles.inputText,
{
backgroundColor: `${survey_theme?.input_background_color}CC`,
borderWidth: 1,
borderColor: `${survey_theme?.input_border_color}80`,
color: `${survey_theme?.text_color}`,
textAlign: (0, utils_1.isRtl)(lang_code) ? 'right' : 'left',
fontFamily: customFont ? customFont : '',
height: question_type === 'data_collection' ? 60 : 100,
},
]}/>)}
{btn_qtns.includes(question_type) && (<react_native_1.View style={styles.submitButtonContainer}>
<react_native_1.Text style={styles.errorText}>{errorMessage}</react_native_1.Text>
{cta_link !== '' ? (<react_native_1.Pressable style={[
styles.submitButton,
{
backgroundColor: `${survey_theme?.highlight_color}`,
width: cta_full_width ? '100%' : 'auto',
},
]} onPress={openCtaLink}>
<CustomBoldText style={[
styles.submitText,
{ color: `${survey_theme?.cta_text_color}` },
]}>
{cta_text}
</CustomBoldText>
</react_native_1.Pressable>) : (<react_native_1.Pressable disabled={checkIfSubmitAllowed()} style={[
styles.submitButton,
{
width: cta_full_width ? '100%' : 'auto',
backgroundColor: checkIfSubmitAllowed()
? `${survey_theme?.highlight_color}80`
: `${survey_theme?.highlight_color}`,
},
]} onPress={() => surveyNextScreen(question_type, '')}>
<CustomBoldText style={[
styles.submitText,
{
color: checkIfSubmitAllowed()
? `${survey_theme?.cta_text_color}80`
: `${survey_theme?.cta_text_color}`,
},
]}>
{cta_text}
</CustomBoldText>
</react_native_1.Pressable>)}
</react_native_1.View>)}
</react_native_1.View>
{show_blitz_logo && (<react_native_1.View style={styles.brandingBox}>
<CustomText style={[
styles.poweredText,
{ color: `${survey_theme?.text_color}` },
]}>
Powered by
</CustomText>
<CustomText style={[
styles.brandName,
{ color: `${survey_theme?.text_color}` },
]}>
Blitzllama
</CustomText>
</react_native_1.View>)}
</react_native_1.View>
</react_native_1.ScrollView>
{show_progress_bar && showProgressBar && (<react_native_1.View style={[
styles.progressBarPath,
{ backgroundColor: `${survey_theme.highlight_color}26` },
]}>
<react_native_1.View style={[
styles.innerProgressBar,
{
backgroundColor: `${survey_theme.highlight_color}`,
width: `${progressBarWidth}%`,
},
]}/>
</react_native_1.View>)}
</react_native_1.View>) : (<react_native_1.View style={[
styles.modalView,
{ backgroundColor: `${survey_theme.bg_color}` },
]}>
<react_native_1.ScrollView style={{ position: 'relative' }}>
{is_dismissible && (<react_native_1.View style={[styles.imgContainer, { zIndex: 10000 }]}>
<react_native_1.Pressable onPress={() => handleDismissSurvey()} hitSlop={{
top: 12,
bottom: 12,
left: 12,
right: 12,
}}>
<react_native_1.View style={{
padding: 10,
zIndex: 10001,
}}>
<react_native_1.Image source={{
uri: 'https://cdn.blitzllama.com/default/close.png',
}} style={styles.deleteImg}/>
</react_native_1.View>
</react_native_1.Pressable>
</react_native_1.View>)}
<react_native_1.View style={{
paddingTop: 50,
paddingBottom: 20,
paddingHorizontal: 30,
}}>
<react_native_1.View style={styles.thanksContainer}>
<react_native_1.Image source={{
uri: 'https://cdn.blitzllama.com/default/green-tick.png',
}} style={styles.greenTickImg}/>
<CustomBoldText style={[
styles.thanksTitle,
{ color: `${survey_theme.text_color}` },
]}>
{thanks_card_title}
</CustomBoldText>
<CustomText style={[
styles.thanksDesc,
{ color: `${survey_theme.secondary_text_color}80` },
]}>
{thanks_card_desc}
</CustomText>
</react_native_1.View>
</react_native_1.View>
</react_native_1.ScrollView>
</react_native_1.View>)}
</react_native_1.View>
</react_native_1.KeyboardAvoidingView>
</react_native_1.Modal>);
};
const styles = react_native_1.StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
backgroundColor: '#00000080',
},
modalView: {
borderTopLeftRadius: 15,
borderTopRightRadius: 15,
width: '100%',
maxHeight: '95%',
minHeight: 200,
position: 'relative',
},
questionTitle: {
fontSize: 16,
lineHeight: 21,
fontWeight: 'bold',
},
questionSubTitle: {
fontSize: 12,
marginTop: 10,
lineHeight: 19,
marginBottom: 27,
},
imgContainer: {
position: 'absolute',
right: 10,
top: 10,
zIndex: 1,
},
deleteImg: {
width: 21,
height: 21,
zIndex: 10000,
},
questionImgContainer: {
marginTop: 10,
maxWidth: '100%',
maxHeight: 200,
},
questionImg: {
marginTop: 15,
height: 200,
},
toggleButtonGroup: {
borderWidth: 1,
flexDirection: 'row',
borderRadius: 5,
},
toggleButton: {
paddingVertical: 10,
alignItems: 'center',
},
numberText: {
textAlign: 'center',
fontSize: 14,
fontWeight: 'bold',
},
npsTextBox: {
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 8,
},
npsText: {
fontSize: 12,
},
selectOption: {
flexDirection: 'row',
alignItems: 'center',
borderWidth: 1,
marginBottom: 5,
borderRadius: 3,
paddingVertical: 5,
paddingHorizontal: 12,
},
optionText: {
fontSize: 14,
fontWeight: 'bold',
lineHeight: 20,
marginLeft: 5,
flex: 1,
flexWrap: 'wrap',
},
inputText: {
borderWidth: 1,
borderRadius: 3,
textAlignVertical: 'top',
padding: 15,
fontSize: 14,
},
submitButtonContainer: {
alignItems: 'center',
justifyContent: 'center',
marginTop: 20,
},
submitButton: {
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 38,
paddingTop: 12,
paddingBottom: 13,
borderRadius: 5,
},
submitText: {
fontSize: 14,
fontWeight: 'bold',
},
thanksContainer: {
justifyContent: 'center',
alignItems: 'center',
},
thanksTitle: {
fontSize: 20,
paddingVertical: 14,
fontWeight: 'bold',
},
thanksDesc: {
fontSize: 12,
},
greenTickImg: {
width: 47,
height: 47,
},
progressBarPath: {
height: 5,
width: '100%',
},
innerProgressBar: {
height: 5,
borderTopRightRadius: 16,
borderBottomRightRadius: 16,
},
brandingBox: {
display: 'flex',
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'center',
paddingTop: 20,
},
poweredText: {
fontSize: 12,
opacity: 0.5,
},
brandName: {
fontSize: 12,
fontWeight: 'bold',
paddingLeft: 5,
opacity: 0.5,
},
errorText: {
color: '#ff244c',
fontSize: 12,
textAlign: 'center',
marginBottom: 5,
},
});
exports.default = SurveyModal;