@onairos/react-native 3.1.17 → 3.2.0

package/src/components/PersonalizationConsentScreen.tsx

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