onairos 2.1.12 → 2.2.0

package/src/components/DataRequest.js

@@ -1,66 +1,143 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+
+// Platform connectors with correct icons
+const platformConnectors = [
+  { name: 'YouTube', icon: '📺', color: 'bg-red-500', connector: 'youtube' },
+  { name: 'LinkedIn', icon: '💼', color: 'bg-blue-700', connector: 'linkedin' },
+  { name: 'Reddit', icon: '🔥', color: 'bg-orange-500', connector: 'reddit' },
+  { name: 'Pinterest', icon: '📌', color: 'bg-red-600', connector: 'pinterest' },
+  { name: 'Instagram', icon: '📷', color: 'bg-pink-500', connector: 'instagram' },
+  { name: 'GitHub', icon: '⚡', color: 'bg-gray-800', connector: 'github' },
+  { name: 'Facebook', icon: '👥', color: 'bg-blue-600', connector: 'facebook' },
+  { name: 'Gmail', icon: '✉️', color: 'bg-red-400', connector: 'gmail' }
+];
 
 const dataTypes = [
   { 
     id: 'basic', 
     name: 'Basic Info', 
-    description: 'Essential profile information and account details', 
+    description: 'Essential profile information, account details, and basic demographics', 
     icon: '👤',
-    required: false
+    required: true, // Auto-selected and non-deselectable
+    tooltip: 'Includes name, email, basic profile information. This data is essential for personalization and is always included.',
+    privacyLink: 'https://onairos.uk/privacy#basic-info'
   },
   { 
     id: 'personality', 
     name: 'Personality', 
-    description: 'Personality traits, behavioral patterns and insights', 
+    description: 'Personality traits, behavioral patterns and psychological insights', 
     icon: '🧠',
-    required: false
+    required: false,
+    tooltip: 'AI-analyzed personality traits based on your social media activity and interactions. Used to improve content recommendations.',
+    privacyLink: 'https://onairos.uk/privacy#personality-data'
   },
   { 
     id: 'preferences', 
     name: 'Preferences', 
-    description: 'User preferences, settings and choices', 
+    description: 'User preferences, interests, settings and personal choices', 
     icon: '⚙️',
-    required: false
+    required: false,
+    tooltip: 'Your likes, interests, content preferences, and behavioral patterns. Helps create a more personalized experience.',
+    privacyLink: 'https://onairos.uk/privacy#preferences-data'
   }
 ];
 
+// Tooltip component
+const Tooltip = ({ children, content, privacyLink }) => {
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  return (
+    <div className="relative inline-block">
+      <span
+        onMouseEnter={() => setShowTooltip(true)}
+        onMouseLeave={() => setShowTooltip(false)}
+        className="border-b border-dotted border-gray-400 cursor-help"
+      >
+        {children}
+      </span>
+      {showTooltip && (
+        <div className="absolute z-50 w-64 p-3 mt-2 text-sm bg-white border border-gray-200 rounded-lg shadow-lg left-0">
+          <p className="mb-2 text-gray-700">{content}</p>
+          <a 
+            href={privacyLink} 
+            target="_blank" 
+            rel="noopener noreferrer"
+            className="text-blue-600 hover:text-blue-800 text-xs font-medium"
+          >
+            Learn more about privacy →
+          </a>
+        </div>
+      )}
+    </div>
+  );
+};
+
 export default function DataRequest({ 
   onComplete, 
   userEmail, 
   appName = 'App', 
   autoFetch = false,
-  testMode = false 
+  testMode = false,
+  connectedAccounts = {} // Connected platforms from onboarding
 }) {
   const [selectedData, setSelectedData] = useState({
-    basic: false, // User can choose
+    basic: true, // Auto-selected and required
     personality: false,
     preferences: false
   });
+  
+  const [connectorStates, setConnectorStates] = useState({});
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isLoadingApi, setIsLoadingApi] = useState(false);
   const [apiResponse, setApiResponse] = useState(null);
   const [apiError, setApiError] = useState(null);
 
+  // Initialize connector states based on connected accounts
+  useEffect(() => {
+    const initialStates = {};
+    platformConnectors.forEach(platform => {
+      initialStates[platform.name] = {
+        connected: connectedAccounts[platform.name] || false,
+        selected: false
+      };
+    });
+    setConnectorStates(initialStates);
+  }, [connectedAccounts]);
+
   const handleDataToggle = (dataId) => {
+    // Don't allow toggling required items
+    const dataType = dataTypes.find(dt => dt.id === dataId);
+    if (dataType?.required) return;
+    
     setSelectedData(prev => ({
       ...prev,
       [dataId]: !prev[dataId]
     }));
   };
 
+  const handleConnectorToggle = (platformName) => {
+    setConnectorStates(prev => ({
+      ...prev,
+      [platformName]: {
+        ...prev[platformName],
+        selected: !prev[platformName]?.selected
+      }
+    }));
+  };
+
   const handleRowClick = (dataId) => {
-    // Make the entire row clickable for better UX
+    const dataType = dataTypes.find(dt => dt.id === dataId);
+    if (dataType?.required) return; // Don't allow clicking required items
     handleDataToggle(dataId);
   };
 
   const generateUserHash = (email) => {
-    // Simple hash function for user identification
     let hash = 0;
     const str = email + Date.now().toString();
     for (let i = 0; i < str.length; i++) {
       const char = str.charCodeAt(i);
       hash = ((hash << 5) - hash) + char;
-      hash = hash & hash; // Convert to 32-bit integer
+      hash = hash & hash;
     }
     return `user_${Math.abs(hash).toString(36)}`;
   };
@@ -70,7 +147,6 @@ export default function DataRequest({
     setApiError(null);
     
     try {
-      // Create a unique user hash for this request
       const userHash = generateUserHash(userEmail);
       
       // Get selected data types
@@ -78,16 +154,19 @@ export default function DataRequest({
         .filter(([key, value]) => value)
         .map(([key]) => key);
 
-      // Map frontend data types to backend confirmation types
+      // Get selected connectors
+      const selectedConnectors = Object.entries(connectorStates)
+        .filter(([platform, state]) => state.selected && state.connected)
+        .map(([platform]) => platform);
+
       const mapDataTypesToConfirmations = (approvedData) => {
         const confirmations = [];
         const currentDate = new Date().toISOString();
         
-        // Map frontend types to backend types according to API expectations
         const dataTypeMapping = {
-          'basic': 'Medium',        // Basic info -> Medium data
-          'personality': 'Large',   // Personality -> Large analysis
-          'preferences': 'Traits'   // Preferences -> Traits data
+          'basic': 'Medium',
+          'personality': 'Large',
+          'preferences': 'Traits'
         };
         
         approvedData.forEach(dataType => {
@@ -102,46 +181,43 @@ export default function DataRequest({
         return confirmations;
       };
 
-      // Determine API endpoint based on test mode
       const apiEndpoint = testMode 
         ? 'https://api2.onairos.uk/inferenceTest'
         : 'https://api2.onairos.uk/getAPIurlMobile';
       
-      // Prepare the base result
       const baseResult = {
         userHash,
         appName,
         approvedData,
+        selectedConnectors,
         apiUrl: apiEndpoint,
         testMode,
         timestamp: new Date().toISOString()
       };
 
       if (autoFetch) {
-        // Auto mode true: make API request and return results
         try {
           const confirmations = mapDataTypesToConfirmations(approvedData);
           
-          // Format request according to backend expectations
           const requestBody = testMode ? {
-            // Test mode: simple format for testing
             approvedData,
+            selectedConnectors,
             userEmail,
             appName,
             testMode,
             timestamp: new Date().toISOString()
           } : {
-            // Live mode: proper Info format for backend
             Info: {
               storage: "local",
               appId: appName,
               confirmations: confirmations,
-              EncryptedUserPin: "pending_pin_integration", // TODO: Get from user PIN setup
+              connectors: selectedConnectors,
+              EncryptedUserPin: "pending_pin_integration",
               account: userEmail,
               proofMode: false,
               Domain: window.location.hostname,
-              web3Type: "standard", // or "Othent" if using Othent
-              OthentSub: null // Only if using Othent authentication
+              web3Type: "standard",
+              OthentSub: null
             }
           };
 
@@ -149,52 +225,55 @@ export default function DataRequest({
             method: 'POST',
             headers: {
               'Content-Type': 'application/json',
+              'x-api-key': 'onairos_web_sdk_live_key_2024'
             },
             body: JSON.stringify(requestBody)
           });
 
           if (!response.ok) {
-            throw new Error(`API call failed with status: ${response.status}`);
+            throw new Error(`API request failed: ${response.status}`);
           }
 
-          const apiData = await response.json();
-          
-          // Format response according to test mode requirements
-          let formattedData = apiData;
-          if (testMode && apiData) {
-            formattedData = {
-              InferenceResult: {
-                output: apiData.croppedInference || apiData.output || apiData.inference,
-                traits: apiData.traitResult || apiData.traits || apiData.personalityData
-              }
-            };
-          }
-          
-          setApiResponse(formattedData);
-          return {
+          const data = await response.json();
+          setApiResponse(data);
+
+          const result = {
             ...baseResult,
-            apiResponse: formattedData,
+            apiResponse: data,
             success: true
           };
+
+          setTimeout(() => {
+            onComplete(result);
+          }, 1500);
+
+          return result;
+
         } catch (error) {
-          setApiError(error.message);
-          return {
+          console.error('API request failed:', error);
+          setApiError(`API request failed: ${error.message}`);
+          
+          const result = {
             ...baseResult,
-            apiError: error.message,
+            error: error.message,
             success: false
           };
+          
+          setTimeout(() => {
+            onComplete(result);
+          }, 2000);
+          
+          return result;
         }
       } else {
-        // Auto mode false (default): return API endpoint URL for manual calling
-        return {
-          ...baseResult,
-          success: true,
-          message: 'Data request approved. Use the provided API URL to fetch user data.'
-        };
+        onComplete(baseResult);
+        return baseResult;
       }
+      
     } catch (error) {
-      setApiError(`Failed to process request: ${error.message}`);
-      return null;
+      console.error('Data processing failed:', error);
+      setApiError(`Processing failed: ${error.message}`);
+      throw error;
     } finally {
       setIsLoadingApi(false);
     }
@@ -218,6 +297,8 @@ export default function DataRequest({
   };
 
   const selectedCount = Object.values(selectedData).filter(Boolean).length;
+  const selectedConnectorCount = Object.values(connectorStates).filter(state => state.selected).length;
+  const connectedCount = Object.values(connectorStates).filter(state => state.connected).length;
 
   return (
     <div className="w-full max-w-md mx-auto bg-white rounded-lg shadow-xl overflow-hidden" style={{ maxHeight: '90vh', height: 'auto' }}>
@@ -225,7 +306,7 @@ export default function DataRequest({
         <div className="text-center mb-4 sm:mb-6">
           <h2 className="text-lg sm:text-xl font-bold text-gray-900 mb-2">Data Request</h2>
           <p className="text-gray-600 text-xs sm:text-sm">
-            Select the data types you'd like to share with <span className="font-medium">{appName}</span>
+            Select the data types and connections to share with <span className="font-medium">{appName}</span>
           </p>
         </div>
 
@@ -237,65 +318,125 @@ export default function DataRequest({
         </div>
 
         {/* Data Types Selection */}
-        <div className="space-y-2 sm:space-y-3 mb-4 sm:mb-6">
-          {dataTypes.map((dataType) => {
-            const isSelected = selectedData[dataType.id] || false;
-            const isRequired = dataType.required;
-            
-            return (
-              <div 
-                key={dataType.id}
-                className={`flex items-center justify-between p-3 sm:p-4 border rounded-lg transition-colors ${
-                  isRequired 
-                    ? 'bg-blue-50 border-blue-200' 
-                    : 'hover:bg-gray-50 cursor-pointer'
-                }`}
-                onClick={() => handleRowClick(dataType.id)}
-              >
-                <div className="flex items-center space-x-3">
-                  <div className="text-xl sm:text-2xl">
-                    {dataType.icon}
-                  </div>
-                  <div>
-                    <h3 className="font-medium text-gray-900 text-sm sm:text-base">
-                      {dataType.name}
-                      {isRequired && <span className="text-blue-600 ml-1">*</span>}
-                    </h3>
-                    <p className="text-xs sm:text-sm text-gray-500">{dataType.description}</p>
+        <div className="mb-6">
+          <h3 className="text-md font-semibold text-gray-900 mb-3">Data Types</h3>
+          <div className="space-y-2 sm:space-y-3">
+            {dataTypes.map((dataType) => {
+              const isSelected = selectedData[dataType.id] || false;
+              const isRequired = dataType.required;
+              
+              return (
+                <div 
+                  key={dataType.id}
+                  className={`flex items-center justify-between p-3 sm:p-4 border rounded-lg transition-colors ${
+                    isRequired 
+                      ? 'bg-gray-100 border-gray-300 cursor-not-allowed' 
+                      : 'hover:bg-gray-50 cursor-pointer border-gray-200'
+                  }`}
+                  onClick={() => handleRowClick(dataType.id)}
+                >
+                  <div className="flex items-center space-x-3">
+                    <div className="text-xl sm:text-2xl">
+                      {dataType.icon}
+                    </div>
+                    <div>
+                      <h4 className="font-medium text-gray-900 text-sm sm:text-base">
+                        <Tooltip content={dataType.tooltip} privacyLink={dataType.privacyLink}>
+                          {dataType.name}
+                        </Tooltip>
+                        {isRequired && <span className="text-gray-500 ml-1 text-xs">(Required)</span>}
+                      </h4>
+                      <p className="text-xs sm:text-sm text-gray-500">{dataType.description}</p>
+                    </div>
                   </div>
+                  
+                  {/* Toggle Switch or Required Badge */}
+                  {isRequired ? (
+                    <div className="px-2 py-1 bg-gray-400 text-white text-xs rounded-full">
+                      Required
+                    </div>
+                  ) : (
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDataToggle(dataType.id);
+                      }}
+                      className={`relative inline-flex h-5 sm:h-6 w-9 sm:w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
+                        isSelected ? 'bg-blue-600' : 'bg-gray-200'
+                      }`}
+                    >
+                      <span
+                        className={`inline-block h-3 sm:h-4 w-3 sm:w-4 transform rounded-full bg-white transition-transform ${
+                          isSelected ? 'translate-x-5 sm:translate-x-6' : 'translate-x-1'
+                        }`}
+                      />
+                    </button>
+                  )}
                 </div>
-                
-                {/* Toggle Switch or Required Badge */}
-                {isRequired ? (
-                  <div className="px-2 py-1 bg-blue-600 text-white text-xs rounded-full">
-                    Required
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Platform Connectors */}
+        <div className="mb-6">
+          <h3 className="text-md font-semibold text-gray-900 mb-3">Data Connectors</h3>
+          <p className="text-xs text-gray-600 mb-3">Select connected platforms to include their data</p>
+          
+          <div className="grid grid-cols-2 gap-2">
+            {platformConnectors.map((platform) => {
+              const connectorState = connectorStates[platform.name];
+              const isConnected = connectorState?.connected || false;
+              const isSelected = connectorState?.selected || false;
+              
+              return (
+                <div 
+                  key={platform.name}
+                  className={`p-2 border rounded-lg transition-all duration-200 cursor-pointer ${
+                    !isConnected ? 'opacity-50 cursor-not-allowed border-gray-200 bg-gray-50' :
+                    isSelected ? 'border-green-400 bg-green-50' : 
+                    'border-gray-200 bg-white hover:border-gray-300'
+                  }`}
+                  onClick={() => isConnected && handleConnectorToggle(platform.name)}
+                >
+                  <div className={`w-6 h-6 rounded ${platform.color} flex items-center justify-center text-white text-sm mb-2 mx-auto relative`}>
+                    {platform.icon}
+                    
+                    {/* Connection Status Indicator */}
+                    {isConnected && isSelected && (
+                      <div className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full flex items-center justify-center">
+                        <svg className="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 20 20">
+                          <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                        </svg>
+                      </div>
+                    )}
                   </div>
-                ) : (
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleDataToggle(dataType.id);
-                    }}
-                    className={`relative inline-flex h-5 sm:h-6 w-9 sm:w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
-                      isSelected ? 'bg-blue-600' : 'bg-gray-200'
-                    }`}
-                  >
-                    <span
-                      className={`inline-block h-3 sm:h-4 w-3 sm:w-4 transform rounded-full bg-white transition-transform ${
-                        isSelected ? 'translate-x-5 sm:translate-x-6' : 'translate-x-1'
-                      }`}
-                    />
-                  </button>
-                )}
-              </div>
-            );
-          })}
+                  
+                  <div className="text-center">
+                    <h4 className="font-medium text-gray-900 text-xs">{platform.name}</h4>
+                    <p className={`text-xs ${
+                      isConnected ? (isSelected ? 'text-green-600' : 'text-blue-600') : 'text-gray-400'
+                    }`}>
+                      {!isConnected ? 'Not connected' : 
+                       isSelected ? 'Selected' : 'Tap to select'}
+                    </p>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          
+          {connectedCount === 0 && (
+            <p className="text-xs text-yellow-600 mt-2 text-center">
+              ⚠️ No platforms connected. Connect platforms in onboarding to select data sources.
+            </p>
+          )}
         </div>
 
         {/* Selection Summary */}
         <div className="mb-3 sm:mb-4 p-2 sm:p-3 bg-green-50 border border-green-200 rounded-lg">
           <p className="text-green-800 text-xs sm:text-sm">
-            ✅ {selectedCount} data type{selectedCount > 1 ? 's' : ''} selected for sharing
+            ✅ {selectedCount} data type{selectedCount > 1 ? 's' : ''} and {selectedConnectorCount} connector{selectedConnectorCount > 1 ? 's' : ''} selected
           </p>
         </div>
 
@@ -323,12 +464,12 @@ export default function DataRequest({
                 : 'bg-gray-300 text-gray-500 cursor-not-allowed'
             }`}
           >
-            {isSubmitting ? 'Processing...' : `Share ${selectedCount} data type${selectedCount > 1 ? 's' : ''}`}
+            {isSubmitting ? 'Processing...' : `Share Selected Data`}
           </button>
           
           <button
             type="button"
-            onClick={() => onComplete({ selectedData: {}, cancelled: true })}
+            onClick={() => onComplete({ selectedData: {}, selectedConnectors: [], cancelled: true })}
             className="w-full py-2 text-gray-500 hover:text-gray-700 text-xs sm:text-sm"
           >
             Cancel

package/src/onairosButton.jsx

@@ -25,7 +25,7 @@ export function OnairosButton({
 }) {
 
   const [showOverlay, setShowOverlay] = useState(false);
-  const [currentFlow, setCurrentFlow] = useState('email'); // 'email' | 'onboarding' | 'pin' | 'training' | 'dataRequest'
+  const [currentFlow, setCurrentFlow] = useState('email'); // 'email' | 'onboarding' | 'pin' | 'dataRequest' (training is within onboarding)
   const [userData, setUserData] = useState(null);
   const [error, setError] = useState(null);
 
@@ -100,17 +100,11 @@ export function OnairosButton({
     
     // Flow decision logic
     if (isNewUser) {
-      console.log('🚀 New user detected → Starting onboarding flow');
+      console.log('🚀 New user detected → Starting onboarding flow (includes training)');
       setCurrentFlow('onboarding');
     } else {
-      console.log('👋 Returning user detected → Skipping onboarding');
-      if (enableTraining) {
-        console.log('📚 Training enabled → Going to training flow');
-        setCurrentFlow('training');
-      } else {
-        console.log('📋 Training disabled → Going to data request flow');
-        setCurrentFlow('dataRequest');
-      }
+      console.log('👋 Existing user detected → Going directly to data request');
+      setCurrentFlow('dataRequest');
     }
   };
 
@@ -230,6 +224,7 @@ export function OnairosButton({
             autoFetch={autoFetch}
             testMode={testMode}
             appIcon={appIcon}
+            connectedAccounts={userData?.connectedAccounts || {}}
           />
         );