@originallyus/feedback-rn-sdk 3.1.0 → 4.0.0-beta.2

package/src/AIAContentUsefulness.tsx

@@ -0,0 +1,296 @@
+import React, {useState, useEffect, useCallback} from 'react'
+import {View, Text, StyleSheet, ActivityIndicator, type StyleProp, type ViewStyle} from 'react-native'
+import {feedbackService} from '@service/feedbackService'
+import type {SubmitSelectionData, SubmitFormData} from '@service/feedbackService'
+import type {InitOptions} from './utils/constants'
+import {PRIMARY_COLOR, TEXT_DARK, BORDER_DEFAULT} from './utils/constants'
+import YesNoButtons from './component/YesNoButtons'
+import Rating from './component/Rating'
+import MultiSelectButtons from './component/MultiSelectButtons'
+import Textarea from './component/Textarea'
+import ButtonSubmit from './component/ButtonSubmit'
+
+export interface AIAContentUsefulnessProps {
+	slug: string
+	options: InitOptions
+	style?: StyleProp<ViewStyle>
+	initialVisible?: boolean
+	onSuccess?: (response: any) => void
+	onError?: (error: Error) => void
+}
+
+type Step = 'PROMPT' | 'LOADING' | 'FORM' | 'SUCCESS'
+
+const AIAContentUsefulness: React.FC<AIAContentUsefulnessProps> = ({
+	slug,
+	options,
+	style,
+	initialVisible = false,
+	onSuccess,
+	onError,
+}) => {
+	const [visible, setVisible] = useState(initialVisible)
+	const [step, setStep] = useState<Step>('PROMPT')
+	const [formData, setFormData] = useState<any>(null)
+	const [loading, setLoading] = useState(true)
+	const [submitting, setSubmitting] = useState(false)
+	const [containerWidth, setContainerWidth] = useState(0)
+
+	// Form values
+	const [rating, setRating] = useState(0)
+	const [selectedOptions, setSelectedOptions] = useState<string[]>([])
+	const [freeText, setFreeText] = useState('')
+
+	const loadForm = useCallback(() => {
+		setLoading(true)
+		feedbackService.requestForm({...options, formSlug: slug}, res => {
+			setLoading(false)
+			if (res && !res.error) {
+				setFormData(res)
+			} else {
+				onError?.(new Error(res?.error || 'Failed to load form'))
+			}
+		})
+	}, [slug, options, onError])
+
+	useEffect(() => {
+		if (visible) {
+			loadForm()
+		}
+	}, [visible, loadForm])
+
+	useEffect(() => {
+		const unsubscribe = feedbackService.onShow((triggerSlug, showOptions) => {
+			if (triggerSlug === slug && !showOptions?.forceModal) {
+				setVisible(true)
+				return true // Handled
+			}
+			return false
+		})
+		return unsubscribe
+	}, [slug])
+
+	const onPromptSelect = async (value: 'yes' | 'no') => {
+		setStep('LOADING')
+		try {
+			const selectionData: SubmitSelectionData = {
+				slug,
+				debug: options.debug || false,
+				event_tag: options.eventTag || '',
+				metadata: options.metadata || {},
+				rating: value === 'yes' ? 2 : 1,
+				request_id: formData?.id || '',
+			}
+			const res = await feedbackService.submitSelection(selectionData, options)
+			if (res && !res.error) {
+				// Hide itself and trigger modal for the rest of the flow
+				setVisible(false)
+				feedbackService.emitShow(slug, {forceModal: true, initialData: res})
+			} else {
+				setStep('PROMPT')
+				onError?.(new Error(res?.error || 'Failed to submit selection'))
+			}
+		} catch (err) {
+			setStep('PROMPT')
+			onError?.(err as Error)
+		}
+	}
+
+	const onSubmitDetails = async () => {
+		setSubmitting(true)
+		try {
+			const submitData: SubmitFormData = {
+				slug: formData.slug || slug,
+				debug: options.debug || false,
+				event_tag: options.eventTag || '',
+				metadata: options.metadata || {},
+				request_id: formData.id || '',
+				rating: rating,
+				selected_options: selectedOptions.join(','),
+				free_text: freeText,
+			}
+			const res = await feedbackService.submitForm(submitData, options)
+			if (res && !res.error) {
+				setStep('SUCCESS')
+				onSuccess?.(res)
+			} else {
+				onError?.(new Error(res?.error || 'Failed to submit feedback'))
+			}
+		} catch (err) {
+			onError?.(err as Error)
+		} finally {
+			setSubmitting(false)
+		}
+	}
+
+	const getThemeColor = (key: string, fallback: string) => {
+		return formData?.theme?.[key] || fallback
+	}
+
+	const textAlign = formData?.alignment === 'left' ? 'left' : 'center'
+	const align: any = formData?.alignment === 'left' ? 'flex-start' : 'center'
+
+	if (!visible) return null
+
+	if (loading) {
+		return (
+			<View style={[styles.container, style, styles.center]}>
+				<ActivityIndicator color={PRIMARY_COLOR} />
+			</View>
+		)
+	}
+
+	if (!formData) return null
+
+	const renderPrompt = () => (
+		<YesNoButtons
+			question={formData.question}
+			value={null}
+			yesLabel={formData.positive_feedback_button || 'Yes'}
+			noLabel={formData.negative_feedback_button || 'No'}
+			onSelect={onPromptSelect}
+			appWidth={containerWidth || 300}
+			selectedVariant="secondary"
+			questionStyle={{color: getThemeColor('question_color', TEXT_DARK), textAlign}}
+		/>
+	)
+
+	const renderForm = () => (
+		<View style={{alignItems: align}}>
+			<Text style={[styles.title, {color: getThemeColor('title_color', TEXT_DARK), textAlign}]}>
+				{formData.title}
+			</Text>
+			{formData.question && (
+				<Text style={[styles.question, {color: getThemeColor('question_color', TEXT_DARK), textAlign}]}>
+					{formData.question}
+				</Text>
+			)}
+
+			{formData.show_rating_star === 1 && (
+				<View style={styles.mv16}>
+					<Rating
+						value={rating}
+						onRate={setRating}
+						selectedStarColor={getThemeColor('selected_star_color', PRIMARY_COLOR)}
+					/>
+				</View>
+			)}
+
+			{formData.options && formData.options.length > 0 && (
+				<MultiSelectButtons
+					question={formData.instruction || ''}
+					options={formData.options.map((o: any) => ({
+						label: o.text || o.title || '',
+						value: o.value || o.slug || '',
+					}))}
+					value={selectedOptions}
+					onSelect={setSelectedOptions}
+					appWidth={containerWidth || 300}
+					style={styles.mv16}
+				/>
+			)}
+
+			{(formData.type === 'comment' || formData.show_comment) && (
+				<Textarea
+					value={freeText}
+					onChangeText={setFreeText}
+					placeholder={formData.comment_placeholder}
+					label={formData.secondary_question || 'Please specify'}
+					appWidth={containerWidth || 300}
+				/>
+			)}
+
+			<ButtonSubmit
+				title={formData.submit_button_text || 'Submit'}
+				onPress={onSubmitDetails}
+				loading={submitting}
+				appWidth={containerWidth || 300}
+				backgroundColor={getThemeColor('button_bg_color', PRIMARY_COLOR)}
+			/>
+		</View>
+	)
+
+	const renderSuccess = () => (
+		<View style={styles.center}>
+			<Text style={[styles.successTitle, {textAlign}]}>{formData.success_title || 'Submitted'}</Text>
+			{formData.success_message && (
+				<Text style={[styles.successMsg, {textAlign}]}>{formData.success_message}</Text>
+			)}
+		</View>
+	)
+
+	if (!visible) return null
+
+	return (
+		<View
+			style={[styles.container, style]}
+			onLayout={event => {
+				const {width} = event.nativeEvent.layout
+				setContainerWidth(width)
+			}}
+		>
+			<View style={styles.expandedContent}>
+				{loading ? (
+					<View style={styles.center}>
+						<ActivityIndicator color={PRIMARY_COLOR} />
+					</View>
+				) : !formData ? null : (
+					<>
+						{step === 'PROMPT' && renderPrompt()}
+						{step === 'LOADING' && (
+							<View style={styles.center}>
+								<ActivityIndicator color={PRIMARY_COLOR} />
+							</View>
+						)}
+						{step === 'FORM' && renderForm()}
+						{step === 'SUCCESS' && renderSuccess()}
+					</>
+				)}
+			</View>
+		</View>
+	)
+}
+
+const styles = StyleSheet.create({
+	container: {
+		padding: 16,
+		backgroundColor: '#FFF',
+		borderRadius: 8,
+		borderWidth: 1,
+		borderColor: BORDER_DEFAULT,
+		marginVertical: 10,
+	},
+	expandedContent: {
+		marginTop: 0,
+	},
+	center: {
+		padding: 20,
+		alignItems: 'center',
+		justifyContent: 'center',
+	},
+	title: {
+		fontSize: 18,
+		fontWeight: '700',
+		marginBottom: 8,
+	},
+	question: {
+		fontSize: 14,
+		marginBottom: 16,
+	},
+	successTitle: {
+		fontSize: 18,
+		fontWeight: '700',
+		color: PRIMARY_COLOR,
+	},
+	successMsg: {
+		fontSize: 14,
+		marginTop: 8,
+		color: TEXT_DARK,
+	},
+	mv16: {
+		marginVertical: 16,
+		width: '100%',
+	},
+})
+
+export default AIAContentUsefulness

package/src/AIAFeedback.tsx

@@ -0,0 +1,354 @@
+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