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

package/src/AIAFeedback.tsx

@@ -1,354 +0,0 @@
-import {feedbackService} from '@service/feedbackService'
-import {forwardRef, useCallback, useEffect, useImperativeHandle, useState} from 'react'
-import {Linking, Modal, Platform, StyleSheet, TouchableOpacity, View} from 'react-native'
-import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
-import Animated, {Easing, FadeIn, FadeOut, LinearTransition, SlideInDown, SlideOutDown} from 'react-native-reanimated'
-import {SafeAreaProvider, useSafeAreaInsets} from 'react-native-safe-area-context'
-import AIAFeedbackForm from '@/AIAFeedbackForm'
-import AIAFeedbackSplash from '@/AIAFeedbackSplash'
-import {feedbackStyles} from '@/AIAFeedbackStyles'
-import AIAFeedbackSuccess from '@/AIAFeedbackSuccess'
-import * as f from '@/utils/common'
-import {type InitOptions, OUS_VARS} from '@/utils/constants'
-import CloseIcon from '@/assets/CloseIcon'
-
-export interface AIAFeedbackProps extends InitOptions {
-	onClose?: () => void
-	onSubmit?: (res: any) => void
-}
-
-export interface AIAFeedbackRef {
-	show: (slug?: string, internalOptions?: {forceModal?: boolean; initialData?: any}) => void
-	hide: () => void
-}
-
-const AIAFeedback = forwardRef<AIAFeedbackRef, AIAFeedbackProps>((props, ref) => {
-	const {debug, metadata, onClose, onSubmit} = props
-	const insets = useSafeAreaInsets()
-	const [visible, setVisible] = useState(false)
-	const [loading, setLoading] = useState(false)
-	const [formData, setFormData] = useState<any>(null)
-	const [submissionError, setSubmissionError] = useState<string | null>(null)
-	const [isSubmitting, setIsSubmitting] = useState(false)
-	const [didSubmit, setDidSubmit] = useState(false)
-	const [submitRes, setSubmitRes] = useState<any>(null)
-	const [showSplash, setShowSplash] = useState(false)
-	const [step, setStep] = useState<'PROMPT' | 'FORM'>('FORM')
-
-	// Form internal state
-	const [rating, setRating] = useState<number>(0)
-	const [freeText, setFreeText] = useState('')
-	const [selectedOptions, setSelectedOptions] = useState<string[]>([])
-
-	const isSplash = showSplash && !didSubmit
-	const intrusive = !isSplash && !!formData?.instrusive_style
-	const isNPSFlow = formData?.type === 'nps' || formData?.type === 'effort' || formData?.type === 'ces'
-	const showSecondary = (!isNPSFlow && rating > 0 && formData?.show_comment) || (isNPSFlow && formData?.show_comment)
-	const shouldCenter = intrusive && (didSubmit || !showSecondary)
-
-	const resetForm = useCallback(() => {
-		setRating(0)
-		setFreeText('')
-		setSelectedOptions([])
-		setDidSubmit(false)
-		setSubmitRes(null)
-		setStep('FORM')
-		setSubmissionError(null)
-	}, [])
-
-	useEffect(() => {
-		// Initialize device UUID if not already set
-		if (!OUS_VARS.uuid) {
-			f.getUniqueID().then(id => {
-				if (id) OUS_VARS.uuid = id
-			})
-		}
-	}, [])
-
-	const hide = useCallback(() => {
-		setVisible(false)
-		resetForm()
-		setShowSplash(false)
-		onClose?.()
-	}, [onClose, resetForm])
-
-	const show = useCallback(
-		(slug?: string, internalOptions?: {forceModal?: boolean; initialData?: any}) => {
-			const targetSlug = slug || props.formSlug
-			// Check if any inline component wants to handle this slug
-			// If forceModal is true, we bypass this check
-			if (!internalOptions?.forceModal) {
-				const handled = feedbackService.emitShow(targetSlug || '')
-				if (handled) return
-			}
-
-			const options: InitOptions = {
-				...props,
-				formSlug: targetSlug,
-			}
-
-			setLoading(true)
-			setFormData(null)
-			setSubmissionError(null)
-
-			if (internalOptions?.initialData) {
-				const res = internalOptions.initialData
-				if (debug) console.log('Feedback SDK: Showing with initial data', res)
-				setLoading(false)
-				setFormData(res)
-				setStep('FORM')
-				if (res.splash_screen_enabled === 1) {
-					setShowSplash(true)
-				}
-				setVisible(true)
-				return
-			}
-
-			if (debug) console.log('Feedback SDK: Requesting form', targetSlug)
-			feedbackService.requestForm(options, (res: any) => {
-				if (debug) console.log('Feedback SDK: Form response', res)
-				setLoading(false)
-				if (res && res.type) {
-					if (res.type === 'external_link' && res.button_url) {
-						Linking.openURL(res.button_url)
-						setVisible(false)
-						return
-					}
-					if (res.type === 'content_usefulness') {
-						setStep('PROMPT')
-					} else {
-						setStep('FORM')
-					}
-					setFormData(res)
-					if (res.splash_screen_enabled === 1) {
-						setShowSplash(true)
-					}
-					setVisible(true)
-				} else {
-					console.warn('Feedback SDK: Failed to load form or invalid response', res)
-					setVisible(false)
-				}
-			})
-		},
-		[props, debug],
-	)
-	useEffect(() => {
-		const unsubscribe = feedbackService.onShow((s, opts) => {
-			if (opts?.forceModal) {
-				show(s, {forceModal: true, initialData: opts.initialData})
-				return true
-			}
-			return false
-		})
-		return unsubscribe
-	}, [show])
-
-	useImperativeHandle(ref, () => ({
-		show,
-		hide,
-	}))
-
-	const handlePromptSelect = useCallback(
-		async (value: 'yes' | 'no') => {
-			setLoading(true)
-			try {
-				const selectionData = {
-					slug: formData.slug,
-					debug: !!debug,
-					event_tag: formData.event_tag || '',
-					metadata: metadata || {},
-					rating: value === 'yes' ? 2 : 1,
-					request_id: formData.id || '',
-				}
-				const res = await feedbackService.submitSelection(selectionData, props)
-				setLoading(false)
-				if (res && !res.error) {
-					setFormData(res)
-					if (res.type === 'success' || !res.type) {
-						setSubmitRes(res)
-						setDidSubmit(true)
-					} else {
-						setStep('FORM')
-						if (value === 'yes') setRating(5)
-						else setRating(1)
-					}
-				}
-			} catch (error) {
-				console.error('Feedback SDK: Prompt select failed', error)
-				setLoading(false)
-			}
-		},
-		[formData, debug, metadata, props],
-	)
-
-	const handleSubmit = useCallback(async () => {
-		if (isSubmitting) return
-		setIsSubmitting(true)
-
-		const data = {
-			slug: formData.slug,
-			debug: !!debug,
-			event_tag: formData.event_tag || '',
-			metadata: metadata || {},
-			request_id: formData.id,
-			rating: rating,
-			selected_options: selectedOptions.join(','),
-			free_text: freeText,
-		}
-
-		try {
-			setSubmissionError(null)
-			const res = await feedbackService.submitForm(data, props)
-			if (formData.type === 'external' && formData.url) {
-				Linking.openURL(formData.url)
-			}
-			setSubmitRes(res)
-			setDidSubmit(true)
-			onSubmit?.(res)
-		} catch (error: any) {
-			console.log('Feedback SDK: Submit failed', error)
-			setSubmissionError(error?.message || 'Submit failed. Please try again.')
-		} finally {
-			setIsSubmitting(false)
-		}
-	}, [formData, debug, metadata, rating, selectedOptions, freeText, isSubmitting, props, onSubmit])
-
-	const getThemeColor = (key: string, fallback: string) => {
-		return formData?.theme?.[key] || fallback
-	}
-
-	const isTabletNonIntrusive = f.isTablet && !intrusive && !isSplash && !loading
-
-	const feedbackContent = (
-		<Animated.View
-			entering={FadeIn.duration(300)}
-			exiting={FadeOut.duration(200)}
-			style={[
-				styles.overlay,
-				intrusive && !f.isTablet && styles.intrusiveOverlay,
-				isSplash && styles.splashOverlay,
-				loading && styles.splashOverlay,
-				f.isTablet && styles.tabletOverlay,
-				isTabletNonIntrusive && styles.nonBlockingOverlay,
-			]}
-			pointerEvents={isTabletNonIntrusive ? 'box-none' : 'auto'}
-		>
-			<>
-				{!intrusive && !isSplash && !isTabletNonIntrusive && (
-					<TouchableOpacity style={styles.dismissArea} activeOpacity={1} onPress={hide} />
-				)}
-
-				<Animated.View
-					entering={isSplash ? FadeIn.duration(400) : SlideInDown.duration(400)}
-					exiting={isSplash ? FadeOut.duration(300) : SlideOutDown.duration(300)}
-					layout={LinearTransition.duration(400).easing(Easing.out(Easing.cubic))}
-					style={[
-						styles.modalContent,
-						isSplash && styles.splashContent,
-						isSplash && f.isTablet && styles.splashTabletContent,
-						intrusive && !f.isTablet && styles.intrusiveContent,
-						f.isTablet && !isSplash && (intrusive ? styles.tabletIntrusive : styles.tabletNonIntrusive),
-					]}
-				>
-					{isSplash ? (
-						<View style={styles.splashInner}>
-							<AIAFeedbackSplash
-								formData={formData}
-								getThemeColor={getThemeColor}
-								onSkip={hide}
-								onProceed={() => setShowSplash(false)}
-							/>
-						</View>
-					) : (
-						<View style={[styles.safeArea, isTabletNonIntrusive && styles.autoHeightReset]}>
-							<View style={styles.header}>
-								{Platform.OS === 'ios' && insets.top > 0 && intrusive && (
-									<View style={{height: insets.top}} />
-								)}
-
-								<View style={styles.headerRow}>
-									{!intrusive && !f.isTablet && <View style={styles.handle} />}
-									{(intrusive || f.isTablet) && (
-										<TouchableOpacity
-											onPress={hide}
-											style={[styles.closeBtn, intrusive && styles.intrusiveCloseBtn]}
-										>
-											<CloseIcon />
-										</TouchableOpacity>
-									)}
-								</View>
-							</View>
-							<KeyboardAwareScrollView
-								bottomOffset={32}
-								style={isTabletNonIntrusive ? styles.autoHeightReset : undefined}
-								contentContainerStyle={[
-									styles.scrollContent,
-									isTabletNonIntrusive && styles.autoHeightReset,
-									shouldCenter && styles.centeredScrollContent,
-								]}
-								showsVerticalScrollIndicator={false}
-							>
-								<View
-									key={didSubmit ? 'success' : 'form'}
-									style={[
-										styles.scrollContentInner,
-										isTabletNonIntrusive && styles.autoHeightFlexReset,
-									]}
-								>
-									{didSubmit ? (
-										<AIAFeedbackSuccess
-											submitRes={submitRes}
-											shouldCenter={shouldCenter}
-											getThemeColor={getThemeColor}
-											onClose={hide}
-											autoHeight={isTabletNonIntrusive}
-										/>
-									) : (
-										<AIAFeedbackForm
-											formData={formData}
-											rating={rating}
-											freeText={freeText}
-											selectedOptions={selectedOptions}
-											step={step}
-											isNPSFlow={isNPSFlow}
-											showSecondary={showSecondary}
-											onRate={setRating}
-											onChangeFreeText={setFreeText}
-											onChangeSelectedOptions={setSelectedOptions}
-											getThemeColor={getThemeColor}
-											onPromptSelect={handlePromptSelect}
-											onSubmit={handleSubmit}
-											isSubmitting={isSubmitting}
-											submissionError={submissionError}
-											autoHeight={isTabletNonIntrusive}
-										/>
-									)}
-								</View>
-							</KeyboardAwareScrollView>
-						</View>
-					)}
-				</Animated.View>
-			</>
-		</Animated.View>
-	)
-
-	if (isTabletNonIntrusive) {
-		return (
-			<View style={StyleSheet.absoluteFill} pointerEvents="box-none">
-				{visible && feedbackContent}
-			</View>
-		)
-	}
-
-	return (
-		<SafeAreaProvider>
-			<Modal visible={visible} transparent={true} animationType="none" onRequestClose={hide}>
-				{feedbackContent}
-			</Modal>
-		</SafeAreaProvider>
-	)
-})
-
-export default AIAFeedback
-
-const styles = feedbackStyles

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