onairos 2.2.0 → 2.3.0

package/src/overlay/IndividualConnection.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 export default function IndividualConnection({
@@ -13,35 +13,165 @@ export default function IndividualConnection({
   onCheckboxChange,
 }) {
   return (
-    <div className="bg-white rounded-lg p-4 shadow border border-gray-200">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center space-x-4">
-          <div className="group">
+    <div className={`relative p-4 sm:p-6 rounded-lg overflow-hidden mb-4 transition-all duration-300 border-2 ${
+      !active 
+        ? 'bg-gray-50 border-gray-200 opacity-60' 
+        : isChecked 
+          ? 'bg-green-50 border-green-400 shadow-lg transform scale-[1.02] ring-2 ring-green-200' 
+          : 'bg-white border-gray-300 hover:border-blue-300 hover:shadow-md'
+    }`}>
+      
+      {/* Selection Status Indicator */}
+      {isChecked && active && (
+        <div className="absolute top-2 right-2 w-8 h-8 bg-green-500 rounded-full flex items-center justify-center animate-pulse shadow-lg">
+          <svg className="w-5 h-5 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 className="relative">
+        {/* Header with title and status */}
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center space-x-4">
+            {/* Data type icon */}
+            <div className={`w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all duration-300 ${
+              !active 
+                ? 'bg-gray-200 text-gray-400' 
+                : isChecked 
+                  ? 'bg-green-500 text-white shadow-lg' 
+                  : 'bg-blue-500 text-white'
+            }`}>
+              {title === "Avatar" ? "👤" : 
+               title === "Traits" ? "🧠" : 
+               title === "Personality" ? "🎭" : "📊"}
+            </div>
+            
             <div>
+              <h3 className={`text-xl font-bold ${
+                !active ? 'text-gray-400' : isChecked ? 'text-green-700' : 'text-gray-800'
+              }`}>
+                {title === "Avatar" ? 'Avatar' : 
+                 title === "Traits" ? 'Personality Traits' : 
+                 title === "Personality" ? 'Personality Model' :
+                 title}
+              </h3>
+              
+              {/* Status badge */}
+              <div className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold ${
+                !active 
+                  ? 'bg-red-100 text-red-700' 
+                  : isChecked 
+                    ? 'bg-green-100 text-green-700' 
+                    : 'bg-blue-100 text-blue-700'
+              }`}>
+                {!active ? '❌ Not Available' : isChecked ? '✅ SELECTED' : '⏳ Available'}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Enhanced Checkbox */}
+        <div className="flex items-center justify-center mb-4">
+          <label className="flex items-center cursor-pointer">
+            <div className="relative">
               <input
-                disabled={!active}
                 type="checkbox"
                 checked={isChecked}
+                disabled={!active}
                 onChange={(e) => onCheckboxChange(e.target.checked)}
+                className="sr-only" // Hide default checkbox
               />
+              
+              {/* Custom checkbox appearance */}
+              <div className={`
+                w-8 h-8 border-3 rounded-lg 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-xl transform scale-110' 
+                    : 'border-gray-400 bg-white hover:border-green-400 hover:bg-green-50 hover:scale-105'
+                }
+              `}>
+                {/* Checkmark icon */}
+                {isChecked && (
+                  <svg 
+                    className="w-6 h-6 text-white animate-bounce" 
+                    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>
+            
+            {/* Selection status text */}
+            <span className={`ml-4 text-lg font-bold transition-colors duration-200 ${
+              !active 
+                ? 'text-gray-400' 
+                : isChecked 
+                  ? 'text-green-600' 
+                  : 'text-gray-700'
+            }`}>
+              {!active 
+                ? 'Not available' 
+                : isChecked 
+                  ? '✓ SELECTED FOR SHARING' 
+                  : 'Click to select'
+              }
+            </span>
+          </label>
         </div>
 
-        <div className="flex items-center">
-          {/* Optional icons or additional UI elements */}
+        {/* Status message for disabled items */}
+        <div className="flex items-center justify-center mb-4">
+          {!active && (
+            <div className="flex items-center space-x-2 text-sm text-red-700 bg-red-100 px-4 py-3 rounded-lg border-2 border-red-300">
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+              </svg>
+              <span className="font-bold">
+                {`No ${title} data available to share`}
+              </span>
+            </div>
+          )}
+          
+          {isChecked && active && (
+            <div className="flex items-center space-x-2 text-sm text-green-700 bg-green-100 px-4 py-3 rounded-lg border-2 border-green-300 animate-pulse">
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+              </svg>
+              <span className="font-bold">
+                THIS DATA WILL BE SHARED
+              </span>
+            </div>
+          )}
         </div>
 
+        {/* Description and rewards with enhanced styling */}
         {descriptions && title !== "Avatar" && (
-          <p className="text-sm font-medium text-gray-900 dark:text-gray-300">
-            Intent: {descriptions}
-          </p>
+          <div className="mb-3 p-3 bg-blue-50 rounded-lg border border-blue-200">
+            <p className={`text-sm font-semibold ${
+              !active ? 'text-gray-400' : 'text-blue-800'
+            }`}>
+              <span className="text-blue-600">🎯 Intent:</span> {descriptions}
+            </p>
+          </div>
         )}
 
         {rewards && (
-          <p className="text-sm font-medium text-gray-900 dark:text-gray-300">
-            Rewards: {rewards}
-          </p>
+          <div className="mb-3 p-3 bg-yellow-50 rounded-lg border border-yellow-200">
+            <p className={`text-sm font-semibold ${
+              !active ? 'text-gray-400' : 'text-yellow-800'
+            }`}>
+              <span className="text-yellow-600">🎁 Rewards:</span> {rewards}
+            </p>
+          </div>
         )}
       </div>
     </div>

package/src/overlay/IndividualConnectionNew.jsx

@@ -11,20 +11,76 @@ function IndividualConnection(props) {
                  'Persona';
 
   return (
-    <div className={`relative p-4 sm:p-6 rounded-sm overflow-hidden mb-8 ${
-      isDisabled ? 'bg-gray-100' : 'bg-indigo-200'
+    <div className={`relative p-4 sm:p-6 rounded-lg overflow-hidden mb-4 transition-all duration-300 border-2 ${
+      isDisabled 
+        ? 'bg-gray-50 border-gray-200 opacity-60' 
+        : selected 
+          ? 'bg-green-50 border-green-400 shadow-lg transform scale-[1.02]' 
+          : 'bg-white border-gray-300 hover:border-blue-300 hover:shadow-md'
     }`}>
+      
+      {/* Selection Status Indicator */}
+      {selected && !isDisabled && (
+        <div className="absolute top-2 right-2 w-6 h-6 bg-green-500 rounded-full flex items-center justify-center animate-pulse">
+          <svg className="w-4 h-4 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 className="relative">
-        <div className="flex-center">
+        {/* Header with title and status */}
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center space-x-3">
+            {/* Data type icon */}
+            <div className={`w-10 h-10 rounded-full flex items-center justify-center text-xl ${
+              isDisabled 
+                ? 'bg-gray-200 text-gray-400' 
+                : selected 
+                  ? 'bg-green-500 text-white' 
+                  : 'bg-blue-500 text-white'
+            }`}>
+              {props.title === "Avatar" ? "👤" : 
+               props.title === "Traits" ? "🧠" : 
+               props.title === "Personality" ? "🎭" : "📊"}
+            </div>
+            
+            <div>
+              <h3 className={`text-lg font-semibold ${
+                isDisabled ? 'text-gray-400' : selected ? 'text-green-700' : 'text-gray-800'
+              }`}>
+                {Insight}
+              </h3>
+              
+              {/* Status badge */}
+              <div className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
+                isDisabled 
+                  ? 'bg-red-100 text-red-600' 
+                  : selected 
+                    ? 'bg-green-100 text-green-700' 
+                    : 'bg-blue-100 text-blue-700'
+              }`}>
+                {isDisabled ? '❌ Not Available' : selected ? '✅ Selected' : '⏳ Available'}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Checkbox with enhanced styling */}
+        <div className="flex items-center justify-center mb-4">
           <Box
             active={props.active}
             onSelectionChange={(isSelected) => {
               setSelected(isSelected);
-              props.onSelectionChange(isSelected);
-              if (isSelected) {
-                props.changeGranted(1);
-              } else {
-                props.changeGranted(-1);
+              if (props.onSelectionChange) {
+                props.onSelectionChange(isSelected);
+              }
+              if (props.changeGranted) {
+                if (isSelected) {
+                  props.changeGranted(1);
+                } else {
+                  props.changeGranted(-1);
+                }
               }
             }}
             disabled={isDisabled}
@@ -32,31 +88,54 @@ function IndividualConnection(props) {
             number={props.number + 1}
             type="Test"
             title={props.title}
+            changeGranted={props.changeGranted}
           />
         </div>
 
-        <div className="flex items-center mt-2">
+        {/* Status message for disabled items */}
+        <div className="flex items-center justify-center mb-3">
           {isDisabled && (
-            <span className="text-sm text-red-500 font-medium">
-              {`No ${props.title} data available to share`}
-            </span>
+            <div className="flex items-center space-x-2 text-sm text-red-600 bg-red-50 px-3 py-2 rounded-lg border border-red-200">
+              <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+              </svg>
+              <span className="font-medium">
+                {`No ${props.title} data available to share`}
+              </span>
+            </div>
+          )}
+          
+          {selected && !isDisabled && (
+            <div className="flex items-center space-x-2 text-sm text-green-600 bg-green-50 px-3 py-2 rounded-lg border border-green-200">
+              <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+              </svg>
+              <span className="font-medium">
+                This data will be shared
+              </span>
+            </div>
           )}
         </div>
 
+        {/* Description and rewards */}
         {props.descriptions && props.title !== "Avatar" && (
-          <p className={`text-sm font-medium ${
-            isDisabled ? 'text-gray-500' : 'text-gray-900'
-          } dark:text-gray-300`}>
-            Intent: {props.descriptions}
-          </p>
+          <div className="mb-2">
+            <p className={`text-sm font-medium ${
+              isDisabled ? 'text-gray-400' : 'text-gray-700'
+            }`}>
+              <span className="text-blue-600 font-semibold">Intent:</span> {props.descriptions}
+            </p>
+          </div>
         )}
 
         {props.rewards && (
-          <p className={`text-sm font-medium ${
-            isDisabled ? 'text-gray-500' : 'text-gray-900'
-          } dark:text-gray-300`}>
-            Rewards: {props.rewards}
-          </p>
+          <div className="mb-2">
+            <p className={`text-sm font-medium ${
+              isDisabled ? 'text-gray-400' : 'text-gray-700'
+            }`}>
+              <span className="text-green-600 font-semibold">Rewards:</span> {props.rewards}
+            </p>
+          </div>
         )}
       </div>
     </div>

package/tests/laravel/examples/blade-example.test.js

@@ -0,0 +1,283 @@
+/**
+ * Laravel Blade Integration Example Test
+ * 
+ * This test simulates a real Laravel application using Blade templates
+ * with Onairos integration.
+ */
+
+import { describe, test, expect, beforeEach } from 'vitest';
+import { JSDOM } from 'jsdom';
+import { initializeOnairosForBlade, createOnairosButton } from '../../../src/laravel/blade-helpers.js';
+
+describe('Laravel Blade Real-World Example', () => {
+  let dom;
+  let window;
+  let document;
+
+  beforeEach(() => {
+    // Create a DOM that mimics a Laravel Blade template
+    dom = new JSDOM(`
+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Laravel App with Onairos</title>
+        <meta name="csrf-token" content="fake-csrf-token">
+      </head>
+      <body>
+        <div class="container">
+          <nav class="navbar">
+            <h1>My Laravel App</h1>
+          </nav>
+          
+          <main class="content">
+            <div class="dashboard">
+              <h2>User Dashboard</h2>
+              <p>Connect your social accounts to enhance your experience:</p>
+              
+              <!-- Onairos button will be inserted here -->
+              <div id="social-connect-button" class="mt-4"></div>
+              
+              <div class="user-profile mt-6">
+                <h3>Profile Enhancement</h3>
+                <p>Let AI analyze your data for better recommendations:</p>
+                
+                <!-- Another Onairos button for advanced features -->
+                <div id="profile-enhancement-button" class="mt-2"></div>
+              </div>
+            </div>
+          </main>
+        </div>
+      </body>
+      </html>
+    `);
+
+    window = dom.window;
+    document = dom.window.document;
+    
+    // Set globals for testing
+    global.window = window;
+    global.document = document;
+    global.navigator = window.navigator;
+  });
+
+  test('should integrate Onairos into Laravel dashboard page', () => {
+    // 1. Initialize Onairos as would be done in Laravel app.js
+    initializeOnairosForBlade({
+      testMode: true,
+      baseUrl: 'https://api2.onairos.uk',
+      autoDetectMobile: true,
+      globalStyles: true
+    });
+
+    // 2. Verify initialization worked
+    expect(window.OnairosConfig).toBeDefined();
+    expect(window.OnairosConfig.testMode).toBe(true);
+    expect(document.getElementById('onairos-styles')).not.toBeNull();
+
+    // 3. Create social connect button (as would be in Blade template script)
+    createOnairosButton('social-connect-button', {
+      requestData: ['email', 'profile', 'social'],
+      webpageName: 'Laravel Dashboard',
+      buttonType: 'pill',
+      textColor: 'white',
+      onComplete: function(result) {
+        console.log('Social connection completed:', result);
+        // In real Laravel app, this might update the UI or make AJAX calls
+      }
+    });
+
+    // 4. Create profile enhancement button
+    createOnairosButton('profile-enhancement-button', {
+      requestData: {
+        basic: { type: "basic", reward: "10 tokens" },
+        personality: { type: "personality", reward: "25 tokens" },
+        preferences: { type: "preferences", reward: "15 tokens" }
+      },
+      webpageName: 'Laravel Profile Enhancement',
+      buttonType: 'rounded',
+      textColor: 'black',
+      onComplete: function(result) {
+        console.log('Profile enhancement completed:', result);
+      }
+    });
+
+    // 5. Verify both buttons were created successfully
+    const socialButton = document.getElementById('social-connect-button-btn');
+    const profileButton = document.getElementById('profile-enhancement-button-btn');
+    
+    expect(socialButton).not.toBeNull();
+    expect(profileButton).not.toBeNull();
+    
+    // 6. Verify button configurations
+    const socialConfig = JSON.parse(socialButton.getAttribute('data-onairos-config'));
+    const profileConfig = JSON.parse(profileButton.getAttribute('data-onairos-config'));
+    
+    expect(socialConfig.requestData).toEqual(['email', 'profile', 'social']);
+    expect(socialConfig.webpageName).toBe('Laravel Dashboard');
+    expect(socialConfig.buttonType).toBe('pill');
+    
+    expect(profileConfig.requestData).toHaveProperty('basic');
+    expect(profileConfig.requestData).toHaveProperty('personality');
+    expect(profileConfig.webpageName).toBe('Laravel Profile Enhancement');
+    expect(profileConfig.buttonType).toBe('rounded');
+
+    // 7. Verify styling was applied
+    expect(socialButton.className).toContain('onairos-btn-pill');
+    expect(profileButton.className).toContain('onairos-btn-rounded');
+  });
+
+  test('should handle Laravel CSRF protection', () => {
+    // Laravel apps typically have CSRF tokens in meta tags
+    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+    expect(csrfToken).toBe('fake-csrf-token');
+
+    // Initialize Onairos with CSRF handling
+    initializeOnairosForBlade({
+      csrfToken: csrfToken,
+      testMode: true
+    });
+
+    expect(window.OnairosConfig.csrfToken).toBe('fake-csrf-token');
+  });
+
+  test('should support Laravel environment variables pattern', () => {
+    // Mock Laravel Vite environment variables
+    global.import = {
+      meta: {
+        env: {
+          DEV: false,
+          PROD: true,
+          VITE_APP_NAME: 'Laravel App',
+          VITE_ONAIROS_API_KEY: 'prod-api-key',
+          VITE_ONAIROS_TEST_MODE: 'false'
+        }
+      }
+    };
+
+    // Initialize using Laravel environment pattern
+    initializeOnairosForBlade({
+      testMode: global.import.meta.env.VITE_ONAIROS_TEST_MODE === 'true',
+      apiKey: global.import.meta.env.VITE_ONAIROS_API_KEY,
+      appName: global.import.meta.env.VITE_APP_NAME
+    });
+
+    expect(window.OnairosConfig.testMode).toBe(false);
+    expect(window.OnairosConfig.apiKey).toBe('prod-api-key');
+    expect(window.OnairosConfig.appName).toBe('Laravel App');
+  });
+
+  test('should handle mobile responsive behavior in Laravel context', () => {
+    // Mock mobile user agent (iPhone)
+    Object.defineProperty(window.navigator, 'userAgent', {
+      writable: true,
+      value: 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15'
+    });
+
+    // Mock mobile viewport
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      value: 375
+    });
+
+    initializeOnairosForBlade({
+      autoDetectMobile: true
+    });
+
+    expect(window.OnairosUtils.isMobile).toBe(true);
+
+    // Create a button and verify mobile-specific behavior
+    createOnairosButton('mobile-test-button', {
+      requestData: ['email'],
+      webpageName: 'Mobile Laravel App'
+    });
+
+    const button = document.getElementById('mobile-test-button-btn');
+    expect(button).not.toBeNull();
+
+    // In mobile context, button should have mobile-optimized styling
+    const styles = window.getComputedStyle ? window.getComputedStyle(button) : {};
+    // Note: JSDOM doesn't compute styles, but we can verify the classes are applied
+    expect(button.className).toContain('onairos-btn');
+  });
+
+  test('should simulate Laravel Ajax integration', async () => {
+    // Mock Laravel AJAX setup (similar to what Laravel includes by default)
+    window.axios = {
+      defaults: {
+        headers: {
+          common: {
+            'X-CSRF-TOKEN': 'fake-csrf-token',
+            'X-Requested-With': 'XMLHttpRequest'
+          }
+        }
+      },
+      post: vi.fn(() => Promise.resolve({ data: { success: true } }))
+    };
+
+    initializeOnairosForBlade({
+      testMode: true,
+      onAuthComplete: async function(result) {
+        // Simulate Laravel AJAX call to store Onairos data
+        try {
+          const response = await window.axios.post('/onairos/callback', {
+            user_hash: result.userHash,
+            connections: result.connectedAccounts,
+            data_types: result.requestData
+          });
+          
+          if (response.data.success) {
+            console.log('Laravel backend updated successfully');
+          }
+        } catch (error) {
+          console.error('Laravel integration error:', error);
+        }
+      }
+    });
+
+    // Trigger a simulated auth completion
+    const mockResult = {
+      userHash: 'test-hash-123',
+      connectedAccounts: ['youtube', 'linkedin'],
+      requestData: ['email', 'profile']
+    };
+
+    // Simulate the callback
+    if (window.OnairosConfig.onAuthComplete) {
+      await window.OnairosConfig.onAuthComplete(mockResult);
+    }
+
+    // Verify Laravel AJAX was called
+    expect(window.axios.post).toHaveBeenCalledWith('/onairos/callback', {
+      user_hash: 'test-hash-123',
+      connections: ['youtube', 'linkedin'],
+      data_types: ['email', 'profile']
+    });
+  });
+
+  test('should work with Laravel Blade @vite directive pattern', () => {
+    // Simulate what happens when Laravel's @vite directive loads assets
+    const viteScript = document.createElement('script');
+    viteScript.type = 'module';
+    viteScript.textContent = `
+      // Simulate Vite module loading
+      import { initializeOnairosForBlade } from '/resources/js/onairos-setup.js';
+      
+      // Auto-initialize when loaded via Vite
+      document.addEventListener('DOMContentLoaded', () => {
+        initializeOnairosForBlade({
+          testMode: import.meta.env.DEV,
+          baseUrl: import.meta.env.VITE_ONAIROS_BASE_URL
+        });
+      });
+    `;
+    
+    document.head.appendChild(viteScript);
+    
+    // Verify script was added (simulating Vite asset injection)
+    const addedScript = document.querySelector('script[type="module"]');
+    expect(addedScript).not.toBeNull();
+    expect(addedScript.textContent).toContain('initializeOnairosForBlade');
+  });
+});