@onairos/react-native 3.1.15 → 3.1.17

package/src/components/PersonalizationConsentScreen.tsx

@@ -1,410 +1,410 @@
-import React, { useState } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  Image,
-} from 'react-native';
-import { COLORS, SPACING } from '../theme';
-import { triggerHaptic, HapticType } from '../utils/haptics';
-import {
-  EnochE,
-  Basicproficon,
-  Basicprofile,
-  Contenticon,
-  Contentanalysis,
-  Personalityicon,
-  Personalityprofile,
-  Personalitytraits,
-  Userpreferences,
-  Checkbox,
-  Checkmark,
-} from './icons';
-
-interface PersonalizationConsentScreenProps {
-  visible: boolean;
-  onAccept: () => void;
-  onDecline: () => void;
-}
-
-const PersonalizationConsentScreen: React.FC<PersonalizationConsentScreenProps> = ({
-  visible,
-  onAccept,
-  onDecline,
-}) => {
-  const [selectedOptions, setSelectedOptions] = useState({
-    basicProfile: false,
-    contentAnalysis: false,
-    personalityProfile: false,
-  });
-
-  const handleOptionToggle = (option: 'basicProfile' | 'contentAnalysis' | 'personalityProfile') => {
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    setSelectedOptions(prev => ({
-      ...prev,
-      [option]: !prev[option]
-    }));
-  };
-
-  // Check if at least one option is selected
-  const hasSelectedOptions = Object.values(selectedOptions).some(value => value);
-
-  if (!visible) return null;
-
-  return (
-    <View style={styles.container}>
-      {/* Header Icons */}
-      <View style={styles.headerContainer}>
-        <View style={styles.iconContainer}>
-          <Image 
-            source={require('../assets/images/Onairoslogo.png')} 
-            style={styles.headerIcon}
-            resizeMode="contain"
-          />
-        </View>
-        <Text style={styles.arrow}>→</Text>
-        <Image 
-          source={require('../assets/images/Enochicon1.png')} 
-          style={styles.enochAppIcon}
-          resizeMode="contain"
-        />
-      </View>
-
-      {/* Title and Subtitle */}
-      <View style={styles.titleContainer}>
-        <Text style={styles.title}>Enoch wants to personalize your experience</Text>
-        <Text style={styles.subtitle}>Choose what to share:</Text>
-      </View>
-
-      {/* Options */}
-      <View style={styles.optionsContainer}>
-        {/* Basic Profile */}
-        <TouchableOpacity 
-          style={styles.optionRow}
-          onPress={() => handleOptionToggle('basicProfile')}
-        >
-          <View style={styles.optionLeft}>
-            <Basicproficon 
-              width={32} 
-              height={32} 
-              fill={COLORS.grey700}
-              style={styles.optionIcon}
-            />
-            <Basicprofile 
-              height={24} 
-              fill={COLORS.grey800}
-              style={styles.optionText}
-            />
-          </View>
-          <View style={styles.checkboxContainer}>
-            {selectedOptions.basicProfile ? (
-              <Checkmark 
-                width={24} 
-                height={24} 
-                fill="#4CD964"
-                style={styles.checkbox}
-              />
-            ) : (
-              <Checkbox 
-                width={24} 
-                height={24} 
-                stroke={COLORS.grey400}
-                style={styles.checkbox}
-              />
-            )}
-          </View>
-        </TouchableOpacity>
-
-        {/* Content Analysis */}
-        <TouchableOpacity 
-          style={styles.optionRow}
-          onPress={() => handleOptionToggle('contentAnalysis')}
-        >
-          <View style={styles.optionLeft}>
-            <Contenticon 
-              width={32} 
-              height={32} 
-              fill={COLORS.grey700}
-              style={styles.optionIcon}
-            />
-            <Userpreferences 
-              height={24} 
-              fill={COLORS.grey800}
-              style={styles.optionText}
-            />
-          </View>
-          <View style={styles.checkboxContainer}>
-            {selectedOptions.contentAnalysis ? (
-              <Checkmark 
-                width={24} 
-                height={24} 
-                fill="#4CD964"
-                style={styles.checkbox}
-              />
-            ) : (
-              <Checkbox 
-                width={24} 
-                height={24} 
-                stroke={COLORS.grey400}
-                style={styles.checkbox}
-              />
-            )}
-          </View>
-        </TouchableOpacity>
-
-        {/* Personality Profile */}
-        <TouchableOpacity 
-          style={styles.optionRow}
-          onPress={() => handleOptionToggle('personalityProfile')}
-        >
-          <View style={styles.optionLeft}>
-            <Personalityicon 
-              width={32} 
-              height={32} 
-              fill={COLORS.grey700}
-              style={styles.optionIcon}
-            />
-            <Personalitytraits 
-              height={24} 
-              fill={COLORS.grey800}
-              style={styles.optionText}
-            />
-          </View>
-          <View style={styles.checkboxContainer}>
-            {selectedOptions.personalityProfile ? (
-              <Checkmark 
-                width={24} 
-                height={24} 
-                fill="#4CD964"
-                style={styles.checkbox}
-              />
-            ) : (
-              <Checkbox 
-                width={24} 
-                height={24} 
-                stroke={COLORS.grey400}
-                style={styles.checkbox}
-              />
-            )}
-          </View>
-        </TouchableOpacity>
-      </View>
-
-      {/* Buttons */}
-      <View style={styles.buttonContainer}>
-        <TouchableOpacity 
-          style={[
-            styles.acceptButton, 
-            hasSelectedOptions && styles.acceptButtonActive
-          ]} 
-          onPress={() => {
-            triggerHaptic(HapticType.BUTTON_PRESS);
-            onAccept();
-          }}
-        >
-          <Text style={[
-            styles.acceptButtonText,
-            hasSelectedOptions && styles.acceptButtonTextActive
-          ]}>Accept & Continue</Text>
-          <Text style={[
-            styles.buttonArrow,
-            hasSelectedOptions && styles.buttonArrowActive
-          ]}>→</Text>
-        </TouchableOpacity>
-        
-        <TouchableOpacity 
-          style={styles.declineButton} 
-          onPress={() => {
-            triggerHaptic(HapticType.BUTTON_PRESS);
-            onDecline();
-          }}
-        >
-          <Text style={styles.declineButtonText}>Decline</Text>
-        </TouchableOpacity>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: COLORS.surface,
-    paddingHorizontal: 4,
-    paddingTop: 5,
-    paddingBottom: 10,
-  },
-
-  headerContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: 32,
-  },
-
-  iconContainer: {
-    width: 72,
-    height: 72,
-    backgroundColor: '#FFFFFF',
-    borderRadius: 14,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginHorizontal: 10,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 2,
-  },
-
-  headerIcon: {
-    width: 48,
-    height: 48,
-  },
-
-  enochAppIcon: {
-    width: 80,
-    height: 80,
-    marginHorizontal: 10,
-  },
-
-  enochLetter: {
-    fontSize: 28,
-    fontFamily: 'IBM Plex Sans',
-    fontWeight: '700',
-    color: COLORS.grey800,
-  },
-
-  arrow: {
-    fontSize: 24,
-    color: COLORS.grey600,
-    marginHorizontal: 16,
-  },
-
-  titleContainer: {
-    alignItems: 'center',
-    marginBottom: 32,
-  },
-
-  title: {
-    fontSize: 20,
-    fontFamily: 'IBM Plex Sans',
-    fontWeight: '600',
-    color: COLORS.grey800,
-    textAlign: 'center',
-    marginBottom: 16,
-  },
-
-  subtitle: {
-    fontSize: 16,
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    color: COLORS.grey600,
-    textAlign: 'center',
-  },
-
-  optionsContainer: {
-    flex: 1,
-    marginBottom: 40,
-  },
-
-  optionRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 16,
-    paddingHorizontal: 2,
-    backgroundColor: '#F8F9FA',
-    borderRadius: 12,
-    marginBottom: 8,
-    marginHorizontal: 0,
-  },
-
-  optionLeft: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-  },
-
-  optionIcon: {
-    marginRight: 12,
-    marginLeft: 2,
-    marginTop: -4,
-  },
-
-  optionText: {
-    flex: 1,
-    marginLeft: 2,
-  },
-
-  checkboxContainer: {
-    paddingLeft: 4,
-    paddingRight: 2,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-
-  checkbox: {
-    // SVG components handle their own sizing
-  },
-
-  buttonContainer: {
-    gap: 16,
-    paddingHorizontal: 0,
-  },
-
-  acceptButton: {
-    backgroundColor: '#E5E5E5',
-    borderRadius: 25,
-    paddingVertical: 16,
-    paddingHorizontal: 24,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-
-  acceptButtonActive: {
-    backgroundColor: '#2D3436',
-  },
-
-  acceptButtonText: {
-    color: '#999999',
-    fontSize: 16,
-    fontFamily: 'Inter',
-    fontWeight: '600',
-    marginRight: 8,
-  },
-
-  acceptButtonTextActive: {
-    color: '#FFFFFF',
-  },
-
-  buttonArrow: {
-    color: '#999999',
-    fontSize: 16,
-  },
-
-  buttonArrowActive: {
-    color: '#FFFFFF',
-  },
-
-  declineButton: {
-    backgroundColor: '#E5E5E5',
-    borderRadius: 25,
-    paddingVertical: 16,
-    paddingHorizontal: 24,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-
-  declineButtonText: {
-    color: COLORS.grey600,
-    fontSize: 16,
-    fontFamily: 'Inter',
-    fontWeight: '500',
-  },
-});
-
-export { PersonalizationConsentScreen };
-export default PersonalizationConsentScreen;
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+} from 'react-native';
+import { COLORS, SPACING } from '../theme';
+import { triggerHaptic, HapticType } from '../utils/haptics';
+import {
+  EnochE,
+  Basicproficon,
+  Basicprofile,
+  Contenticon,
+  Contentanalysis,
+  Personalityicon,
+  Personalityprofile,
+  Personalitytraits,
+  Userpreferences,
+  Checkbox,
+  Checkmark,
+} from './icons';
+
+interface PersonalizationConsentScreenProps {
+  visible: boolean;
+  onAccept: () => void;
+  onDecline: () => void;
+}
+
+const PersonalizationConsentScreen: React.FC<PersonalizationConsentScreenProps> = ({
+  visible,
+  onAccept,
+  onDecline,
+}) => {
+  const [selectedOptions, setSelectedOptions] = useState({
+    basicProfile: false,
+    contentAnalysis: false,
+    personalityProfile: false,
+  });
+
+  const handleOptionToggle = (option: 'basicProfile' | 'contentAnalysis' | 'personalityProfile') => {
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    setSelectedOptions(prev => ({
+      ...prev,
+      [option]: !prev[option]
+    }));
+  };
+
+  // Check if at least one option is selected
+  const hasSelectedOptions = Object.values(selectedOptions).some(value => value);
+
+  if (!visible) return null;
+
+  return (
+    <View style={styles.container}>
+      {/* Header Icons */}
+      <View style={styles.headerContainer}>
+        <View style={styles.iconContainer}>
+          <Image 
+            source={require('../assets/images/Onairoslogo.png')} 
+            style={styles.headerIcon}
+            resizeMode="contain"
+          />
+        </View>
+        <Text style={styles.arrow}>→</Text>
+        <Image 
+          source={require('../assets/images/Enochicon1.png')} 
+          style={styles.enochAppIcon}
+          resizeMode="contain"
+        />
+      </View>
+
+      {/* Title and Subtitle */}
+      <View style={styles.titleContainer}>
+        <Text style={styles.title}>Enoch wants to personalize your experience</Text>
+        <Text style={styles.subtitle}>Choose what to share:</Text>
+      </View>
+
+      {/* Options */}
+      <View style={styles.optionsContainer}>
+        {/* Basic Profile */}
+        <TouchableOpacity 
+          style={styles.optionRow}
+          onPress={() => handleOptionToggle('basicProfile')}
+        >
+          <View style={styles.optionLeft}>
+            <Basicproficon 
+              width={32} 
+              height={32} 
+              fill={COLORS.grey700}
+              style={styles.optionIcon}
+            />
+            <Basicprofile 
+              height={24} 
+              fill={COLORS.grey800}
+              style={styles.optionText}
+            />
+          </View>
+          <View style={styles.checkboxContainer}>
+            {selectedOptions.basicProfile ? (
+              <Checkmark 
+                width={24} 
+                height={24} 
+                fill="#4CD964"
+                style={styles.checkbox}
+              />
+            ) : (
+              <Checkbox 
+                width={24} 
+                height={24} 
+                stroke={COLORS.grey400}
+                style={styles.checkbox}
+              />
+            )}
+          </View>
+        </TouchableOpacity>
+
+        {/* Content Analysis */}
+        <TouchableOpacity 
+          style={styles.optionRow}
+          onPress={() => handleOptionToggle('contentAnalysis')}
+        >
+          <View style={styles.optionLeft}>
+            <Contenticon 
+              width={32} 
+              height={32} 
+              fill={COLORS.grey700}
+              style={styles.optionIcon}
+            />
+            <Userpreferences 
+              height={24} 
+              fill={COLORS.grey800}
+              style={styles.optionText}
+            />
+          </View>
+          <View style={styles.checkboxContainer}>
+            {selectedOptions.contentAnalysis ? (
+              <Checkmark 
+                width={24} 
+                height={24} 
+                fill="#4CD964"
+                style={styles.checkbox}
+              />
+            ) : (
+              <Checkbox 
+                width={24} 
+                height={24} 
+                stroke={COLORS.grey400}
+                style={styles.checkbox}
+              />
+            )}
+          </View>
+        </TouchableOpacity>
+
+        {/* Personality Profile */}
+        <TouchableOpacity 
+          style={styles.optionRow}
+          onPress={() => handleOptionToggle('personalityProfile')}
+        >
+          <View style={styles.optionLeft}>
+            <Personalityicon 
+              width={32} 
+              height={32} 
+              fill={COLORS.grey700}
+              style={styles.optionIcon}
+            />
+            <Personalitytraits 
+              height={24} 
+              fill={COLORS.grey800}
+              style={styles.optionText}
+            />
+          </View>
+          <View style={styles.checkboxContainer}>
+            {selectedOptions.personalityProfile ? (
+              <Checkmark 
+                width={24} 
+                height={24} 
+                fill="#4CD964"
+                style={styles.checkbox}
+              />
+            ) : (
+              <Checkbox 
+                width={24} 
+                height={24} 
+                stroke={COLORS.grey400}
+                style={styles.checkbox}
+              />
+            )}
+          </View>
+        </TouchableOpacity>
+      </View>
+
+      {/* Buttons */}
+      <View style={styles.buttonContainer}>
+        <TouchableOpacity 
+          style={[
+            styles.acceptButton, 
+            hasSelectedOptions && styles.acceptButtonActive
+          ]} 
+          onPress={() => {
+            triggerHaptic(HapticType.BUTTON_PRESS);
+            onAccept();
+          }}
+        >
+          <Text style={[
+            styles.acceptButtonText,
+            hasSelectedOptions && styles.acceptButtonTextActive
+          ]}>Accept & Continue</Text>
+          <Text style={[
+            styles.buttonArrow,
+            hasSelectedOptions && styles.buttonArrowActive
+          ]}>→</Text>
+        </TouchableOpacity>
+        
+        <TouchableOpacity 
+          style={styles.declineButton} 
+          onPress={() => {
+            triggerHaptic(HapticType.BUTTON_PRESS);
+            onDecline();
+          }}
+        >
+          <Text style={styles.declineButtonText}>Decline</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.surface,
+    paddingHorizontal: 4,
+    paddingTop: 5,
+    paddingBottom: 10,
+  },
+
+  headerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 32,
+  },
+
+  iconContainer: {
+    width: 72,
+    height: 72,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: 10,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+
+  headerIcon: {
+    width: 48,
+    height: 48,
+  },
+
+  enochAppIcon: {
+    width: 80,
+    height: 80,
+    marginHorizontal: 10,
+  },
+
+  enochLetter: {
+    fontSize: 28,
+    fontFamily: 'IBM Plex Sans',
+    fontWeight: '700',
+    color: COLORS.grey800,
+  },
+
+  arrow: {
+    fontSize: 24,
+    color: COLORS.grey600,
+    marginHorizontal: 16,
+  },
+
+  titleContainer: {
+    alignItems: 'center',
+    marginBottom: 32,
+  },
+
+  title: {
+    fontSize: 20,
+    fontFamily: 'IBM Plex Sans',
+    fontWeight: '600',
+    color: COLORS.grey800,
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+
+  subtitle: {
+    fontSize: 16,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    color: COLORS.grey600,
+    textAlign: 'center',
+  },
+
+  optionsContainer: {
+    flex: 1,
+    marginBottom: 40,
+  },
+
+  optionRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 16,
+    paddingHorizontal: 2,
+    backgroundColor: '#F8F9FA',
+    borderRadius: 12,
+    marginBottom: 8,
+    marginHorizontal: 0,
+  },
+
+  optionLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+
+  optionIcon: {
+    marginRight: 12,
+    marginLeft: 2,
+    marginTop: -4,
+  },
+
+  optionText: {
+    flex: 1,
+    marginLeft: 2,
+  },
+
+  checkboxContainer: {
+    paddingLeft: 4,
+    paddingRight: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  checkbox: {
+    // SVG components handle their own sizing
+  },
+
+  buttonContainer: {
+    gap: 16,
+    paddingHorizontal: 0,
+  },
+
+  acceptButton: {
+    backgroundColor: '#E5E5E5',
+    borderRadius: 25,
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  acceptButtonActive: {
+    backgroundColor: '#2D3436',
+  },
+
+  acceptButtonText: {
+    color: '#999999',
+    fontSize: 16,
+    fontFamily: 'Inter',
+    fontWeight: '600',
+    marginRight: 8,
+  },
+
+  acceptButtonTextActive: {
+    color: '#FFFFFF',
+  },
+
+  buttonArrow: {
+    color: '#999999',
+    fontSize: 16,
+  },
+
+  buttonArrowActive: {
+    color: '#FFFFFF',
+  },
+
+  declineButton: {
+    backgroundColor: '#E5E5E5',
+    borderRadius: 25,
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  declineButtonText: {
+    color: COLORS.grey600,
+    fontSize: 16,
+    fontFamily: 'Inter',
+    fontWeight: '500',
+  },
+});
+
+export { PersonalizationConsentScreen };
+export default PersonalizationConsentScreen;