@originallyus/feedback-rn-sdk 4.0.0-beta.6 → 4.0.0-beta.7

package/src/AIAFeedbackForm.tsx

@@ -1,267 +0,0 @@
-import React from 'react'
-import {Image, Text, View} from 'react-native'
-import {feedbackStyles as styles} from './AIAFeedbackStyles'
-import ErrorIcon from './assets/ErrorIcon'
-import ButtonSubmit from './component/ButtonSubmit'
-import MultiSelectButtons from './component/MultiSelectButtons'
-import Rating from './component/Rating'
-import RatingNumber from './component/RatingNumber'
-import Textarea from './component/Textarea'
-import YesNoButtons from './component/YesNoButtons'
-import * as f from './utils/common'
-import {ERROR_COLOR} from './utils/constants'
-
-interface Props {
-	formData: any
-	rating: number
-	freeText: string
-	selectedOptions: string[]
-	step: 'PROMPT' | 'FORM'
-	isNPSFlow: boolean
-	showSecondary: boolean
-	isSubmitting: boolean
-	submissionError: string | null
-	autoHeight?: boolean
-	onRate: (value: number) => void
-	onChangeFreeText: (value: string) => void
-	onChangeSelectedOptions: (value: string[]) => void
-	onSubmit: () => void
-	getThemeColor: (key: string, fallback: string) => string
-	onPromptSelect: (value: 'yes' | 'no') => void
-}
-
-const AIAFeedbackForm: React.FC<Props> = ({
-	formData,
-	rating,
-	freeText,
-	selectedOptions,
-	step,
-	isNPSFlow,
-	showSecondary,
-	isSubmitting,
-	submissionError,
-	onRate,
-	onChangeFreeText,
-	onChangeSelectedOptions,
-	onSubmit,
-	getThemeColor,
-	onPromptSelect,
-	autoHeight,
-}) => {
-	if (!formData) return null
-
-	const appWidth = f.getAppWidth(true)
-	const align: any = formData.alignment === 'left' ? 'flex-start' : 'center'
-	const textAlign: any = formData.alignment === 'left' ? 'left' : 'center'
-	const titleFont = getThemeColor('title_font', '')
-	const questionFont = getThemeColor('question_font', '')
-	const textareaFont = getThemeColor('textarea_font', '')
-
-	const renderPrompt = () => (
-		<YesNoButtons
-			question={formData.question}
-			value={null}
-			yesLabel={formData.positive_feedback_button || 'Yes'}
-			noLabel={formData.negative_feedback_button || 'No'}
-			onSelect={onPromptSelect}
-			appWidth={appWidth}
-			selectedVariant="secondary"
-			questionStyle={{
-				color: getThemeColor('question_color', '#14181C'),
-				textAlign,
-				fontFamily: questionFont || undefined,
-			}}
-		/>
-	)
-
-	const renderSatisfaction = () => (
-		<Rating
-			title={formData.title}
-			question={formData.question}
-			value={rating}
-			onRate={onRate}
-			rating_max={formData.rating_max || 5}
-			titleStyle={{
-				color: getThemeColor('title_color', '#14181C'),
-				textAlign,
-				fontFamily: titleFont || undefined,
-			}}
-			questionStyle={{
-				color: getThemeColor('question_color', '#14181C'),
-				textAlign,
-				fontFamily: questionFont || undefined,
-			}}
-			normalStarColor={getThemeColor('normal_star_color', '#D0D0D0')}
-			selectedStarColor={getThemeColor('selected_star_color', '#F7C926')}
-			style={styles.satisfactionRating}
-		/>
-	)
-
-	const renderNPS = () => (
-		<View style={[styles.section, {alignItems: align}]}>
-			<Text
-				style={[
-					styles.title,
-					// {color: getThemeColor('title_color', '#082065'), textAlign, fontFamily: titleFont},
-				]}
-			>
-				{formData.title}
-			</Text>
-			<RatingNumber
-				numStar={rating}
-				handlePressRating={onRate}
-				rating_min={formData.rating_min || 0}
-				rating_max={formData.rating_max || 10}
-				scale_label_left={formData.scale_label_left}
-				scale_label_right={formData.scale_label_right}
-				scale_label_color={getThemeColor('scale_label_color', '#858B91')}
-				scale_label_font={getThemeColor('scale_label_font', '')}
-				appWidth={appWidth}
-				compact={false}
-				label={formData.question}
-			/>
-		</View>
-	)
-
-	const renderPoll = () => (
-		<View style={styles.section}>
-			<Text style={[styles.title, {color: getThemeColor('title_color', '#14181C'), fontFamily: titleFont}]}>
-				{formData.title}
-			</Text>
-
-			{formData.type === 'poll' && formData.options && (
-				<MultiSelectButtons
-					question={formData.instruction}
-					options={formData.options.map((o: any) => ({
-						label: o.title || o.label || String(o),
-						value: o.slug || o.value || String(o),
-					}))}
-					value={selectedOptions}
-					onSelect={onChangeSelectedOptions}
-					appWidth={appWidth}
-				/>
-			)}
-			{(formData.type === 'comment' || (formData.type === 'poll' && formData.show_comment)) && (
-				<Textarea
-					value={freeText}
-					onChangeText={onChangeFreeText}
-					placeholder={formData.comment_placeholder}
-					label={formData.question}
-					appWidth={appWidth}
-					maxLength={formData.comment_max_length || 150}
-					fontFamily={textareaFont}
-					style={formData.type === 'poll' ? styles.mt16 : undefined}
-					note={formData.fineprint}
-				/>
-			)}
-		</View>
-	)
-
-	const renderExternal = () => (
-		<View style={[styles.section, {alignItems: align}]}>
-			{formData.image_file_url && (
-				<Image source={{uri: formData.image_file_url}} style={styles.externalIcon} resizeMode="contain" />
-			)}
-			<Text
-				style={[
-					styles.title,
-					{color: getThemeColor('title_color', '#14181C'), textAlign, fontFamily: titleFont},
-				]}
-			>
-				{formData.title}
-			</Text>
-		</View>
-	)
-
-	const renderSecondary = () => {
-		if (!showSecondary) return null
-
-		return (
-			<View style={[styles.secondarySection, autoHeight && styles.autoHeightReset, {alignItems: align}]}>
-				{formData.type === 'satisfaction' && formData.options && formData.options.length > 0 && (
-					<>
-						<View style={styles.divider} />
-
-						<MultiSelectButtons
-							question={rating === 5 ? formData.instruction_5_star : formData.instruction}
-							options={formData.options.map((o: any) => ({
-								label: o.title || o.label || String(o),
-								value: o.slug || o.value || String(o),
-							}))}
-							value={selectedOptions}
-							onSelect={onChangeSelectedOptions}
-							appWidth={appWidth}
-						/>
-					</>
-				)}
-
-				<Textarea
-					value={freeText}
-					onChangeText={onChangeFreeText}
-					placeholder={
-						formData.type === 'satisfaction' && rating === 5
-							? formData.comment_placeholder_5_star
-							: formData.comment_placeholder
-					}
-					label={formData.secondary_question || formData.comment_label || ''}
-					appWidth={appWidth}
-					maxLength={formData.comment_max_length || 150}
-					fontFamily={textareaFont}
-					style={styles.mt16}
-					note={formData.fineprint}
-				/>
-			</View>
-		)
-	}
-
-	return (
-		<View style={[styles.formRoot, autoHeight && styles.autoHeightFlexReset]}>
-			<View
-				style={[
-					styles.formContent,
-					autoHeight && styles.autoHeightReset,
-					!showSecondary && formData.type !== 'poll' && styles.centeredContent,
-				]}
-			>
-				{step === 'PROMPT' && renderPrompt()}
-
-				{step === 'FORM' && (
-					<>
-						{formData.type === 'satisfaction' && renderSatisfaction()}
-						{isNPSFlow && renderNPS()}
-						{(formData.type === 'poll' || formData.type === 'comment') && renderPoll()}
-						{formData.type === 'external' && renderExternal()}
-						{renderSecondary()}
-					</>
-				)}
-			</View>
-
-			<View style={[styles.submitSection, autoHeight && styles.autoHeightMargin]}>
-				{submissionError && (
-					<View style={[styles.errorWrap, styles.mb12]}>
-						<ErrorIcon size={20} color={ERROR_COLOR} />
-						<Text style={[styles.error, {color: ERROR_COLOR}]}>{submissionError}</Text>
-					</View>
-				)}
-
-				{(rating > 0 ||
-					formData.type === 'comment' ||
-					formData.type === 'external' ||
-					(formData.type === 'poll' && selectedOptions.length > 0)) && (
-					<ButtonSubmit
-						title={formData.button_text || 'Submit'}
-						onPress={onSubmit}
-						loading={isSubmitting}
-						appWidth={appWidth}
-						containerStyle={styles.mt24}
-						backgroundColor={getThemeColor('button_bg_color', '#D31145')}
-						textColor={getThemeColor('button_text_color', '#FFF')}
-						fontFamily={getThemeColor('button_font', '')}
-					/>
-				)}
-			</View>
-		</View>
-	)
-}
-
-export default AIAFeedbackForm

package/src/AIAFeedbackSplash.tsx

@@ -1,49 +0,0 @@
-import React from 'react'
-import {Text, TouchableOpacity, View} from 'react-native'
-import ButtonSubmit from './component/ButtonSubmit'
-import * as f from './utils/common'
-import {feedbackStyles as styles} from './AIAFeedbackStyles'
-
-interface Props {
-	formData: any
-	getThemeColor: (key: string, fallback: string) => string
-	onSkip: () => void
-	onProceed: () => void
-}
-
-const AIAFeedbackSplash: React.FC<Props> = ({formData, getThemeColor, onSkip, onProceed}) => {
-	if (!formData) return null
-
-	const textAlign: any = formData.alignment === 'left' ? 'left' : 'center'
-	const btnBg = getThemeColor('button_bg_color', '#D31145')
-	const btnText = getThemeColor('button_text_color', '#FFFFFF')
-	const titleColor = getThemeColor('title_color', '#082065')
-	const questionColor = getThemeColor('question_color', '#082065')
-	const titleFont = getThemeColor('title_font', '')
-	const questionFont = getThemeColor('question_font', '')
-
-	return (
-		<View style={styles.splashContainer}>
-			<Text style={[styles.splashTitle, {color: titleColor, textAlign, fontFamily: titleFont}]}>
-				{formData.splash_screen_title}
-			</Text>
-			<Text style={[styles.splashQuestion, {color: questionColor, textAlign, fontFamily: questionFont}]}>
-				{formData.splash_screen_question}
-			</Text>
-
-			<ButtonSubmit
-				title={formData.splash_screen_button_proceed || "Yes, Let's go!"}
-				onPress={onProceed}
-				appWidth={f.getAppWidth(true)}
-				backgroundColor={btnBg}
-				textColor={btnText}
-				containerStyle={styles.mt24}
-			/>
-			<TouchableOpacity onPress={onSkip} style={styles.skipBtn}>
-				<Text style={styles.skipBtnText}>{formData.splash_screen_button_skip || 'Another time'}</Text>
-			</TouchableOpacity>
-		</View>
-	)
-}
-
-export default AIAFeedbackSplash

package/src/AIAFeedbackStyles.ts

@@ -1,311 +0,0 @@
-import {Platform, StyleSheet} from 'react-native'
-import * as f from './utils/common'
-
-export const feedbackStyles = StyleSheet.create({
-	overlay: {
-		flex: 1,
-		backgroundColor: 'rgba(20, 24, 28, 0.5)',
-		justifyContent: 'flex-end',
-	},
-	nonBlockingOverlay: {
-		backgroundColor: 'transparent',
-	},
-	splashOverlay: {
-		justifyContent: 'center',
-		alignItems: 'center',
-		paddingHorizontal: 6,
-	},
-	intrusiveOverlay: {
-		backgroundColor: '#FFF',
-		justifyContent: 'flex-start',
-	},
-	dismissArea: {
-		flex: 1,
-	},
-	modalContent: {
-		backgroundColor: '#FFF',
-		borderTopLeftRadius: 16,
-		borderTopRightRadius: 16,
-		width: '100%',
-		maxHeight: '90%',
-		minHeight: 180,
-		overflow: 'hidden',
-	},
-	splashContent: {
-		...Platform.select({
-			ios: {
-				shadowColor: '#000',
-				shadowOffset: {width: 0, height: 10},
-				shadowOpacity: 0.2,
-				shadowRadius: 20,
-			},
-			android: {
-				elevation: 10,
-			},
-		}),
-		borderTopLeftRadius: 16,
-		borderTopRightRadius: 16,
-		borderBottomLeftRadius: 16,
-		borderBottomRightRadius: 16,
-	},
-	splashTabletContent: {
-		width: '90%',
-		maxWidth: 350,
-		borderRadius: 16,
-		maxHeight: '80%',
-		minHeight: 0,
-	},
-	splashInner: {
-		paddingTop: 20,
-	},
-	intrusiveContent: {
-		flex: 1,
-		maxHeight: '100%',
-		minHeight: '100%',
-		borderTopLeftRadius: 0,
-		borderTopRightRadius: 0,
-	},
-	safeArea: {
-		flexShrink: 1,
-		flexGrow: 1,
-		flexDirection: 'column',
-	},
-	flex1: {
-		flex: 1,
-	},
-	header: {
-		alignItems: 'center',
-		justifyContent: 'flex-start',
-		position: 'relative',
-	},
-	headerRow: {
-		height: 30,
-		width: '100%',
-		alignItems: 'center',
-		justifyContent: 'center',
-		position: 'relative',
-	},
-	handle: {
-		width: 40,
-		height: 4,
-		backgroundColor: '#E0E0E0',
-		borderRadius: 2,
-	},
-	closeBtn: {
-		position: 'absolute',
-		right: 16,
-		padding: 8,
-		zIndex: 10,
-	},
-	intrusiveCloseBtn: {
-		top: 0,
-	},
-	closeText: {
-		fontSize: 18,
-		color: '#999',
-	},
-	scrollContent: {
-		flexGrow: 1,
-		paddingHorizontal: f.isTablet ? 20 : 12,
-		paddingBottom: 30,
-	},
-	scrollContentInner: {
-		flex: 1,
-		minHeight: 1,
-	},
-	center: {
-		height: 200,
-		justifyContent: 'center',
-		alignItems: 'center',
-	},
-	mtAuto: {
-		marginTop: 'auto',
-	},
-	w100: {
-		width: '100%',
-	},
-	section: {
-		marginBottom: 20,
-		gap: 24,
-		alignSelf: 'stretch',
-		width: '100%',
-	},
-	secondarySection: {
-		flexGrow: 1,
-		alignItems: 'center',
-		gap: 24,
-	},
-	satisfactionRating: {
-		alignItems: 'center',
-		marginBottom: 16,
-	},
-	title: {
-		fontSize: 24,
-		fontWeight: '500',
-		color: '#14181C',
-		marginBottom: 8,
-	},
-	externalIcon: {
-		width: 140,
-		height: 140,
-		marginBottom: 10,
-	},
-	question: {
-		fontSize: 16,
-		color: '#082065',
-		marginBottom: 16,
-		fontWeight: '600',
-	},
-	successContainer: {
-		padding: 24,
-		alignItems: 'center',
-	},
-	successTitle: {
-		fontSize: 20,
-		fontWeight: '700',
-		color: '#082065',
-		marginBottom: 12,
-		textAlign: 'center',
-	},
-	successDesc: {
-		fontSize: 16,
-		color: '#444',
-		marginBottom: 24,
-		textAlign: 'center',
-		lineHeight: 22,
-	},
-	mt16: {
-		marginTop: 16,
-	},
-	mt24: {
-		marginTop: 24,
-	},
-	splashContainer: {
-		padding: 16,
-		alignItems: 'center',
-	},
-	splashTitle: {
-		fontSize: 24,
-		fontWeight: '700',
-		textAlign: 'center',
-		marginBottom: 16,
-	},
-	splashQuestion: {
-		fontSize: 16,
-		textAlign: 'center',
-		marginBottom: 24,
-		lineHeight: 22,
-	},
-	skipBtn: {
-		marginTop: 16,
-		padding: 8,
-	},
-	skipBtnText: {
-		fontSize: 14,
-		textDecorationLine: 'underline',
-		fontWeight: '700',
-	},
-	successIcon: {
-		width: 80,
-		height: 80,
-		marginBottom: 20,
-	},
-	fineprint: {
-		fontSize: 12,
-		marginTop: 16,
-		textAlign: 'center',
-		opacity: 0.8,
-	},
-	centeredScrollContent: {
-		flexGrow: 1,
-		justifyContent: 'center',
-	},
-	formRoot: {
-		flex: 1,
-		justifyContent: 'space-between',
-	},
-	formContent: {
-		flexGrow: 1,
-	},
-	submitSection: {
-		width: '100%',
-		marginTop: 'auto',
-	},
-	successRoot: {
-		flex: 1,
-		justifyContent: 'space-between',
-	},
-	successContentCenter: {
-		flex: 1,
-		justifyContent: 'center',
-	},
-	tabletOverlay: {
-		justifyContent: 'center',
-		alignItems: 'center',
-	},
-	tabletIntrusive: {
-		width: '90%',
-		maxWidth: 850,
-		height: 'auto',
-		maxHeight: '90%',
-		borderRadius: 16,
-		overflow: 'hidden',
-		...Platform.select({
-			ios: {
-				shadowColor: '#000',
-				shadowOffset: {width: 0, height: 10},
-				shadowOpacity: 0.2,
-				shadowRadius: 20,
-			},
-			android: {
-				elevation: 10,
-			},
-		}),
-	},
-	tabletNonIntrusive: {
-		position: 'absolute',
-		bottom: 30,
-		right: 30,
-		width: 400,
-		maxHeight: '70%',
-		borderRadius: 16,
-		overflow: 'hidden',
-		...Platform.select({
-			ios: {
-				shadowColor: '#000',
-				shadowOffset: {width: 0, height: 10},
-				shadowOpacity: 0.2,
-				shadowRadius: 20,
-			},
-			android: {
-				elevation: 10,
-			},
-		}),
-	},
-
-	errorWrap: {
-		flexDirection: 'row',
-		alignItems: 'center',
-		gap: 6,
-	},
-	error: {
-		fontSize: 14,
-		lineHeight: 20,
-		flex: 1,
-		fontWeight: '400',
-	},
-	mb12: {
-		marginBottom: 12,
-	},
-	divider: {
-		width: '100%',
-		height: 1,
-		backgroundColor: '#E5E5E5',
-		marginTop: 12,
-	},
-
-	centeredContent: {justifyContent: 'center', alignItems: 'center'},
-	autoHeightReset: {flexGrow: 0},
-	autoHeightFlexReset: {flex: 0},
-	autoHeightMargin: {marginTop: 16},
-})

package/src/AIAFeedbackSuccess.tsx

@@ -1,67 +0,0 @@
-import React from 'react'
-import {Image, Text, View} from 'react-native'
-import ButtonSubmit from './component/ButtonSubmit'
-import * as f from './utils/common'
-import {feedbackStyles as styles} from './AIAFeedbackStyles'
-
-interface Props {
-	submitRes: any
-	shouldCenter: boolean
-	getThemeColor: (key: string, fallback: string) => string
-	onClose: () => void
-	autoHeight?: boolean
-}
-
-const AIAFeedbackSuccess: React.FC<Props> = ({submitRes, shouldCenter, getThemeColor, onClose, autoHeight}) => {
-	if (!submitRes) return null
-
-	const align: any = submitRes.alignment === 'left' ? 'flex-start' : 'center'
-	const textAlign: any = submitRes.alignment === 'left' ? 'left' : 'center'
-	const btnBg = getThemeColor('button_bg_color', '#D31145')
-	const btnText = getThemeColor('button_text_color', '#FFFFFF')
-	const titleColor = getThemeColor('title_color', '#333D47')
-	const instructionColor = getThemeColor('instruction_color', '#444')
-	const titleFont = getThemeColor('title_font', '')
-	const instructionFont = getThemeColor('instruction_font', '')
-
-	return (
-		<View style={[styles.successRoot, autoHeight && styles.autoHeightFlexReset]}>
-			<View
-				style={[
-					styles.successContentCenter,
-					autoHeight && styles.autoHeightFlexReset,
-					shouldCenter && styles.centeredScrollContent,
-				]}
-			>
-				<View style={[styles.w100, {alignItems: align}]}>
-					{submitRes.image_file_url && (
-						<Image
-							source={{uri: submitRes.image_file_url}}
-							style={styles.successIcon}
-							resizeMode="contain"
-						/>
-					)}
-					<Text style={[styles.successTitle, {color: titleColor, textAlign, fontFamily: titleFont}]}>
-						{submitRes.title || 'Thank You!'}
-					</Text>
-					<Text
-						style={[styles.successDesc, {color: instructionColor, textAlign, fontFamily: instructionFont}]}
-					>
-						{submitRes.instruction || 'Your feedback has been submitted successfully.'}
-					</Text>
-				</View>
-			</View>
-			<View style={[styles.submitSection, autoHeight && styles.autoHeightMargin]}>
-				<ButtonSubmit
-					title={submitRes.button_text || 'Close'}
-					onPress={onClose}
-					appWidth={f.getAppWidth(true)}
-					backgroundColor={btnBg}
-					textColor={btnText}
-				/>
-			</View>
-		</View>
-	)
-}
-
-export default AIAFeedbackSuccess

package/src/assets/CheckIcon.tsx

@@ -1,18 +0,0 @@
-import {memo} from 'react'
-import Svg, {Path} from 'react-native-svg'
-
-const CHECK_PATH =
-	'M13.66 0.390759C14.181 -0.130253 15.0257 -0.130253 15.5467 0.390759C16.0678 0.911771 16.0678 1.7565 15.5467 2.27751L6.60443 11.2198C6.08342 11.7408 5.23869 11.7408 4.71768 11.2198L0.390759 6.89289C-0.130253 6.37188 -0.130253 5.52716 0.390759 5.00614C0.911771 4.48513 1.7565 4.48513 2.27751 5.00614L5.66106 8.38969L13.66 0.390759Z'
-
-interface CheckIconProps {
-	size?: number
-	color?: string
-}
-
-const CheckIcon = memo(({size = 16, color = '#082065'}: CheckIconProps) => (
-	<Svg width={size} height={size * (12 / 16)} viewBox="0 0 16 12" fill="none">
-		<Path d={CHECK_PATH} fill={color} />
-	</Svg>
-))
-
-export default CheckIcon