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

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

package/src/assets/CloseIcon.tsx

@@ -1,18 +0,0 @@
-import {memo} from 'react'
-import Svg, {Path} from 'react-native-svg'
-
-const CLOSE_PATH =
-	'M0.329505 1.9205C-0.109835 1.48116 -0.109835 0.768845 0.329505 0.329505C0.768845 -0.109835 1.48116 -0.109835 1.9205 0.329505L7.50001 5.90902L13.0795 0.329505C13.5189 -0.109835 14.2312 -0.109835 14.6705 0.329505C15.1099 0.768845 15.1099 1.48116 14.6705 1.9205L9.091 7.50001L14.6705 13.0795C15.1098 13.5188 15.1098 14.2312 14.6705 14.6705C14.2312 15.1098 13.5188 15.1098 13.0795 14.6705L7.50001 9.091L1.92052 14.6705C1.48118 15.1098 0.76887 15.1098 0.32953 14.6705C-0.109809 14.2312 -0.109809 13.5188 0.32953 13.0795L5.90902 7.50001L0.329505 1.9205Z'
-
-interface CloseIconProps {
-	size?: number
-	color?: string
-}
-
-const CloseIcon = memo(({size = 15, color = '#14181C'}: CloseIconProps) => (
-	<Svg width={size} height={size} viewBox="0 0 15 15" fill="none">
-		<Path d={CLOSE_PATH} fill={color} />
-	</Svg>
-))
-
-export default CloseIcon

package/src/assets/ErrorIcon.tsx

@@ -1,18 +0,0 @@
-import {memo} from 'react'
-import Svg, {Path} from 'react-native-svg'
-
-const ERROR_PATH =
-	'M0.156466 13.1473L7.03005 0.647682C7.50494 -0.215894 8.7458 -0.215894 9.22068 0.647682L16.0943 13.1473C16.5524 13.9804 15.9497 14.9996 14.999 14.9996H1.25178C0.301066 14.9996 -0.301639 13.9804 0.156466 13.1473ZM9.06281 11.5621C9.06281 11.0444 8.64307 10.6246 8.12531 10.6246C7.60754 10.6246 7.18781 11.0444 7.18781 11.5621C7.18781 12.0799 7.60754 12.4996 8.12531 12.4996C8.64307 12.4996 9.06281 12.0799 9.06281 11.5621ZM7.50031 8.74962C7.50031 9.0948 7.78013 9.37462 8.12531 9.37462C8.47048 9.37462 8.75031 9.0948 8.75031 8.74962L8.75031 5.62462C8.75031 5.27944 8.47048 4.99962 8.12531 4.99962C7.78013 4.99962 7.50031 5.27944 7.50031 5.62462L7.50031 8.74962Z'
-
-interface ErrorIconProps {
-	size?: number
-	color?: string
-}
-
-const ErrorIcon = memo(({size = 17, color = '#D40C74'}: ErrorIconProps) => (
-	<Svg width={size} height={size * (15 / 17)} viewBox="0 0 17 15" fill="none">
-		<Path fillRule="evenodd" clipRule="evenodd" d={ERROR_PATH} fill={color} />
-	</Svg>
-))
-
-export default ErrorIcon

package/src/assets/PlusIcon.tsx

@@ -1,18 +0,0 @@
-import {memo} from 'react'
-import Svg, {Path} from 'react-native-svg'
-
-const PLUS_PATH =
-	'M10.9375 2.8125C10.9375 2.29473 10.5178 1.875 10 1.875C9.48223 1.875 9.0625 2.29473 9.0625 2.8125V9.0625H2.8125C2.29473 9.0625 1.875 9.48223 1.875 10C1.875 10.5178 2.29473 10.9375 2.8125 10.9375H9.0625V17.1875C9.0625 17.7053 9.48223 18.125 10 18.125C10.5178 18.125 10.9375 17.7053 10.9375 17.1875V10.9375H17.1875C17.7053 10.9375 18.125 10.5178 18.125 10C18.125 9.48223 17.7053 9.0625 17.1875 9.0625H10.9375V2.8125Z'
-
-interface PlusIconProps {
-	size?: number
-	color?: string
-}
-
-const PlusIcon = memo(({size = 20, color = '#14181C'}: PlusIconProps) => (
-	<Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
-		<Path d={PLUS_PATH} fill={color} />
-	</Svg>
-))
-
-export default PlusIcon

package/src/assets/StarIcon.tsx

@@ -1,18 +0,0 @@
-import {memo} from 'react'
-import Svg, {Path} from 'react-native-svg'
-
-const STAR_PATH =
-	'M19.501 0C18.376 0 17.3907 0.665167 16.9393 1.66397L16.926 1.69418L12.8583 11.2479L2.56085 12.1664L2.5561 12.1668C1.41701 12.2642 0.498481 13.0334 0.14345 14.0747L0.135281 14.0994C-0.2017 15.1468 0.100079 16.318 0.937835 17.0669L8.72953 24.0082L6.44915 34.0612C6.2016 35.1515 6.63026 36.2947 7.53285 36.952C8.43089 37.6059 9.63575 37.6688 10.5975 37.1072L19.501 31.7697L28.3897 37.0983L28.4136 37.1124C28.799 37.3338 29.2845 37.5 29.8232 37.5C30.4271 37.5 30.9801 37.3051 31.4392 36.9877L31.4528 36.9782L31.4692 36.9664C32.3716 36.3093 32.8 35.1651 32.5528 34.075L30.2593 23.9427L38.0549 17.0897C38.0727 17.074 38.0902 17.0579 38.1073 17.0414C38.857 16.3165 39.2148 15.1812 38.8668 14.0994C38.527 13.0432 37.577 12.2635 36.446 12.1668L36.4412 12.1664L26.1432 11.2479L22.078 1.71323L22.0767 1.71031C21.6427 0.684685 20.6281 0 19.501 0Z'
-
-interface StarIconProps {
-	size?: number
-	color?: string
-}
-
-const StarIcon = memo(({size = 39, color = '#D6D8DA'}: StarIconProps) => (
-	<Svg width={size} height={size * (38 / 39)} viewBox="0 0 39 38" fill="none">
-		<Path d={STAR_PATH} fill={color} />
-	</Svg>
-))
-
-export default StarIcon

package/src/component/Button.tsx

@@ -1,68 +0,0 @@
-import {Pressable, Text, StyleSheet, type ViewStyle, type TextStyle} from 'react-native'
-
-/**
- * Basic pressable button (thin wrapper around React Native `Pressable` + `Text`).
- */
-export interface ButtonProps {
-	/**
-	 * Text shown on the button.
-	 */
-	title: string
-	/**
-	 * Called when the button is pressed.
-	 */
-	onPress: () => void
-	/**
-	 * When true, disables the button and lowers opacity.
-	 *
-	 * @default false
-	 */
-	disabled?: boolean
-	/**
-	 * Optional style override for the button container.
-	 */
-	style?: ViewStyle
-	/**
-	 * Optional style override for the label text.
-	 */
-	textStyle?: TextStyle
-}
-
-export function Button({title, onPress, disabled = false, style, textStyle}: ButtonProps) {
-	return (
-		<Pressable
-			onPress={onPress}
-			disabled={disabled}
-			style={({pressed}) => [
-				styles.button,
-				pressed && styles.buttonPressed,
-				disabled && styles.buttonDisabled,
-				style,
-			]}
-		>
-			<Text style={[styles.text, textStyle]}>{title}</Text>
-		</Pressable>
-	)
-}
-
-const styles = StyleSheet.create({
-	button: {
-		paddingHorizontal: 20,
-		paddingVertical: 12,
-		backgroundColor: '#007AFF',
-		borderRadius: 8,
-		alignItems: 'center',
-		justifyContent: 'center',
-	},
-	buttonPressed: {
-		opacity: 0.8,
-	},
-	buttonDisabled: {
-		opacity: 0.5,
-	},
-	text: {
-		color: '#FFFFFF',
-		fontSize: 16,
-		fontWeight: '600',
-	},
-})