onairos 2.1.13 → 2.2.1

package/src/components/DataRequest.js

@@ -1,66 +1,136 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+
+// Remove the platform connectors - these should be handled in onboarding
+// 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 stated preferences and interests from connected platforms. Helps customize your 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
   });
+  
+  // Remove connector states - not needed for data request
+  // const [connectorStates, setConnectorStates] = useState({});
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isLoadingApi, setIsLoadingApi] = useState(false);
   const [apiResponse, setApiResponse] = useState(null);
   const [apiError, setApiError] = useState(null);
 
+  // Remove connector initialization - not needed
+  // 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]
     }));
   };
 
+  // handleConnectorToggle removed - connectors are handled in onboarding
+
   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 +140,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 +147,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 +174,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, // Removed as connectors are handled in onboarding
         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, // Removed as connectors are handled in onboarding
             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, // Removed as connectors are handled in onboarding
+              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 +218,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 +290,8 @@ export default function DataRequest({
   };
 
   const selectedCount = Object.values(selectedData).filter(Boolean).length;
+  // const selectedConnectorCount = Object.values(connectorStates).filter(state => state.selected).length; // Removed as connectors are handled in onboarding
+  // const connectedCount = Object.values(connectorStates).filter(state => state.connected).length; // Removed as connectors are handled in onboarding
 
   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 +299,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 +311,70 @@ 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 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>
-                  <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>
-                </div>
-                
-                {/* Toggle Switch or Required Badge */}
-                {isRequired ? (
-                  <div className="px-2 py-1 bg-blue-600 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'
+                  
+                  {/* 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'
                       }`}
-                    />
-                  </button>
-                )}
-              </div>
-            );
-          })}
+                    >
+                      <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>
         </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' : ''} selected
           </p>
         </div>
 
@@ -323,12 +402,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

@@ -224,6 +224,7 @@ export function OnairosButton({
             autoFetch={autoFetch}
             testMode={testMode}
             appIcon={appIcon}
+            connectedAccounts={userData?.connectedAccounts || {}}
           />
         );
       

package/src/overlay/CheckBox.jsx

@@ -8,46 +8,106 @@ function Box({
   setSelected,
   number,
   type,
-  title}) {
+  title
+}) {
   const [isChecked, setIsChecked] = useState(false);
 
   const handleCheckboxChange = (newState) => {
     setIsChecked(newState);
-    console.log("This data request is active :", active)
-    console.log("With new Checked state now being: ", newState)
+    console.log("This data request is active:", active);
+    console.log("With new Checked state now being:", newState);
+    
     // Update the counter
     if (newState) {
       changeGranted(1);
     } else {
       changeGranted(-1);
     }
-    // onSelectionChange(type);
+    
+    // Call parent callback if provided
+    if (onSelectionChange) {
+      onSelectionChange(newState);
+    }
   };
 
-return (
-  <div className="group">
-    <div
-      
-    >
-      <input
-        // disabled={!active}
-        type="checkbox"
-        checked={isChecked}
-        onChange={(e) => {
-          // setIsChecked(e.target.checked);
-
-          handleCheckboxChange(e.target.checked);
-        }}
-      />
+  return (
+    <div className="group">
+      <div className="relative">
+        {/* Custom styled checkbox with clear visual feedback */}
+        <label className="flex items-center cursor-pointer">
+          <div className="relative">
+            <input
+              type="checkbox"
+              checked={isChecked}
+              disabled={!active}
+              onChange={(e) => handleCheckboxChange(e.target.checked)}
+              className="sr-only" // Hide default checkbox
+            />
+            
+            {/* Custom checkbox appearance */}
+            <div className={`
+              w-6 h-6 border-2 rounded-md flex items-center justify-center transition-all duration-200
+              ${!active 
+                ? 'border-gray-300 bg-gray-100 cursor-not-allowed opacity-50' 
+                : isChecked 
+                  ? 'border-green-500 bg-green-500 shadow-md transform scale-105' 
+                  : 'border-gray-400 bg-white hover:border-green-400 hover:bg-green-50'
+              }
+            `}>
+              {/* Checkmark icon */}
+              {isChecked && (
+                <svg 
+                  className="w-4 h-4 text-white animate-pulse" 
+                  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>
+          
+          {/* Selection status text */}
+          <span className={`ml-3 text-sm font-medium transition-colors duration-200 ${
+            !active 
+              ? 'text-gray-400' 
+              : isChecked 
+                ? 'text-green-600 font-semibold' 
+                : 'text-gray-700'
+          }`}>
+            {!active 
+              ? 'Not available' 
+              : isChecked 
+                ? '✓ Selected' 
+                : 'Click to select'
+            }
+          </span>
+        </label>
+        
+        {/* Selection indicator badge */}
+        {isChecked && active && (
+          <div className="absolute -top-2 -right-2 w-4 h-4 bg-green-500 rounded-full flex items-center justify-center animate-bounce">
+            <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>
     </div>
-  </div>
-      );
+  );
 }
 
 Box.propTypes = {
   active: PropTypes.bool.isRequired,
-  onSelectionChange: PropTypes.func.isRequired,
-  disabled: PropTypes.bool,
+  onSelectionChange: PropTypes.func,
+  changeGranted: PropTypes.func.isRequired,
+  setSelected: PropTypes.func,
+  number: PropTypes.number,
+  type: PropTypes.string,
   title: PropTypes.string.isRequired
 };