@originallyus/feedback-rn-sdk 4.0.0-beta.1 → 4.0.0-beta.11

package/src/AIAContentUsefulness.tsx

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

@@ -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