onairos 2.2.0 → 2.3.0

package/src/laravel/blade-helpers.js

@@ -0,0 +1,263 @@
+/**
+ * Onairos Laravel Blade Integration Helpers
+ * 
+ * This file provides utilities for integrating Onairos components
+ * directly in PHP Blade templates without requiring React setup.
+ */
+
+// Global Onairos instance for Blade templates
+let onairosInstance = null;
+
+/**
+ * Initialize Onairos for Blade template usage
+ * @param {Object} config - Global configuration
+ */
+export function initializeOnairosForBlade(config = {}) {
+  const defaultConfig = {
+    apiKey: null,
+    baseUrl: 'https://api2.onairos.uk',
+    testMode: false,
+    autoDetectMobile: true,
+    globalStyles: true
+  };
+
+  window.OnairosConfig = { ...defaultConfig, ...config };
+  
+  // Inject global styles if enabled
+  if (window.OnairosConfig.globalStyles) {
+    injectOnairosStyles();
+  }
+
+  // Initialize mobile detection
+  window.OnairosUtils = {
+    isMobile: detectMobileDevice(),
+    detectMobile: detectMobileDevice
+  };
+
+  console.log('🔥 Onairos initialized for Laravel Blade templates');
+}
+
+/**
+ * Create an Onairos button element that can be used in Blade templates
+ * @param {string} targetElementId - ID of the element to mount to
+ * @param {Object} options - Onairos button options
+ */
+export function createOnairosButton(targetElementId, options = {}) {
+  const element = document.getElementById(targetElementId);
+  if (!element) {
+    console.error(`❌ Element with ID "${targetElementId}" not found`);
+    return;
+  }
+
+  const defaultOptions = {
+    requestData: ['email', 'profile'],
+    webpageName: 'Laravel App',
+    testMode: window.OnairosConfig?.testMode || false,
+    autoFetch: true,
+    buttonType: 'pill',
+    textColor: 'black'
+  };
+
+  const config = { ...defaultOptions, ...options };
+
+  // Create button HTML
+  element.innerHTML = `
+    <div class="onairos-button-container">
+      <button 
+        id="${targetElementId}-btn" 
+        class="onairos-btn onairos-btn-${config.buttonType}"
+        data-onairos-config='${JSON.stringify(config)}'
+      >
+        <span class="onairos-btn-text" style="color: ${config.textColor}">
+          Connect with Onairos
+        </span>
+        <span class="onairos-btn-loading" style="display: none;">
+          Loading...
+        </span>
+      </button>
+    </div>
+  `;
+
+  // Add event listener
+  const button = document.getElementById(`${targetElementId}-btn`);
+  button.addEventListener('click', () => handleOnairosButtonClick(config));
+}
+
+/**
+ * Handle Onairos button click in Blade context
+ * @param {Object} config - Button configuration
+ */
+function handleOnairosButtonClick(config) {
+  // For Blade templates, we'll use the popup/iframe approach
+  if (window.OnairosUtils.isMobile) {
+    handleMobileFlow(config);
+  } else {
+    handleDesktopFlow(config);
+  }
+}
+
+/**
+ * Handle mobile OAuth flow (redirect-based)
+ * @param {Object} config - Configuration
+ */
+function handleMobileFlow(config) {
+  const authUrl = buildAuthUrl(config);
+  window.location.href = authUrl;
+}
+
+/**
+ * Handle desktop OAuth flow (popup-based)
+ * @param {Object} config - Configuration
+ */
+function handleDesktopFlow(config) {
+  const authUrl = buildAuthUrl(config);
+  
+  const popup = window.open(
+    authUrl,
+    'onairosAuth',
+    'width=450,height=700,scrollbars=yes,resizable=yes'
+  );
+
+  if (popup) {
+    const checkClosed = setInterval(() => {
+      if (popup.closed) {
+        clearInterval(checkClosed);
+        handleAuthComplete(config);
+      }
+    }, 1000);
+  }
+}
+
+/**
+ * Build authentication URL for OAuth flow
+ * @param {Object} config - Configuration
+ * @returns {string} Auth URL
+ */
+function buildAuthUrl(config) {
+  const baseUrl = window.OnairosConfig.baseUrl;
+  const params = new URLSearchParams({
+    webpageName: config.webpageName,
+    requestData: JSON.stringify(config.requestData),
+    testMode: config.testMode,
+    returnUrl: window.location.href
+  });
+  
+  return `${baseUrl}/auth/laravel?${params.toString()}`;
+}
+
+/**
+ * Handle authentication completion
+ * @param {Object} config - Configuration
+ */
+function handleAuthComplete(config) {
+  if (config.onComplete && typeof config.onComplete === 'function') {
+    config.onComplete({
+      success: true,
+      timestamp: new Date().toISOString()
+    });
+  }
+  
+  // Trigger custom event for Laravel apps to listen to
+  const event = new CustomEvent('onairosAuthComplete', {
+    detail: { config, success: true }
+  });
+  window.dispatchEvent(event);
+}
+
+/**
+ * Detect if device is mobile
+ * @returns {boolean}
+ */
+function detectMobileDevice() {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
+         (window.innerWidth <= 768);
+}
+
+/**
+ * Inject Onairos styles into the page
+ */
+function injectOnairosStyles() {
+  if (document.getElementById('onairos-styles')) return;
+
+  const styles = `
+    <style id="onairos-styles">
+      .onairos-button-container {
+        display: inline-block;
+        margin: 10px 0;
+      }
+      
+      .onairos-btn {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border: none;
+        border-radius: 25px;
+        padding: 12px 24px;
+        color: white;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+      }
+      
+      .onairos-btn:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
+      }
+      
+      .onairos-btn-pill {
+        border-radius: 25px;
+      }
+      
+      .onairos-btn-icon {
+        border-radius: 50%;
+        width: 45px;
+        height: 45px;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      
+      .onairos-btn-loading {
+        color: #888;
+      }
+      
+      @media (max-width: 768px) {
+        .onairos-btn {
+          width: 100%;
+          padding: 15px 20px;
+          font-size: 16px;
+        }
+      }
+    </style>
+  `;
+  
+  document.head.insertAdjacentHTML('beforeend', styles);
+}
+
+/**
+ * Laravel Blade template directive helper
+ * Usage in Blade: @onairos(['requestData' => ['email'], 'webpageName' => 'My App'])
+ */
+export function renderOnairosDirective(options = {}) {
+  const elementId = `onairos-${Math.random().toString(36).substr(2, 9)}`;
+  
+  return `
+    <div id="${elementId}"></div>
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        if (window.createOnairosButton) {
+          window.createOnairosButton('${elementId}', ${JSON.stringify(options)});
+        }
+      });
+    </script>
+  `;
+}
+
+// Expose functions globally for Blade template access
+if (typeof window !== 'undefined') {
+  window.initializeOnairosForBlade = initializeOnairosForBlade;
+  window.createOnairosButton = createOnairosButton;
+  window.renderOnairosDirective = renderOnairosDirective;
+} 

package/src/laravel/vite-plugin.js

@@ -0,0 +1,179 @@
+/**
+ * Onairos Vite Plugin for Laravel
+ * 
+ * This plugin provides seamless integration of Onairos components
+ * within Laravel Vite applications, handling both development and
+ * production builds.
+ */
+
+import { resolve } from 'path';
+
+export function onairosLaravelPlugin(options = {}) {
+  const defaultOptions = {
+    autoImport: true,
+    injectGlobals: true,
+    optimizeDeps: true,
+    enableHMR: true,
+    bladeSupport: true
+  };
+
+  const config = { ...defaultOptions, ...options };
+
+  return {
+    name: 'onairos-laravel',
+    config(viteConfig, { command }) {
+      // Optimize dependencies for faster dev server startup
+      if (config.optimizeDeps) {
+        viteConfig.optimizeDeps = viteConfig.optimizeDeps || {};
+        viteConfig.optimizeDeps.include = viteConfig.optimizeDeps.include || [];
+        viteConfig.optimizeDeps.include.push('onairos');
+      }
+
+      // Add alias for easier imports
+      viteConfig.resolve = viteConfig.resolve || {};
+      viteConfig.resolve.alias = viteConfig.resolve.alias || {};
+      viteConfig.resolve.alias['@onairos'] = resolve('node_modules/onairos');
+
+      // Configure for Laravel Blade support
+      if (config.bladeSupport && command === 'serve') {
+        viteConfig.server = viteConfig.server || {};
+        viteConfig.server.watch = viteConfig.server.watch || {};
+        viteConfig.server.watch.include = viteConfig.server.watch.include || [];
+        viteConfig.server.watch.include.push('resources/views/**/*.blade.php');
+      }
+    },
+
+    configureServer(server) {
+      if (config.enableHMR) {
+        // Add custom HMR handling for Onairos components
+        server.ws.on('onairos:reload', () => {
+          server.ws.send({
+            type: 'full-reload'
+          });
+        });
+      }
+    },
+
+    transformIndexHtml: {
+      enforce: 'pre',
+      transform(html, context) {
+        if (config.injectGlobals && context.server) {
+          // Inject Onairos initialization script for development
+          const initScript = `
+            <script type="module">
+              import { initializeOnairosForBlade } from '/node_modules/onairos/src/laravel/blade-helpers.js';
+              
+              // Initialize Onairos for Laravel Blade templates
+              initializeOnairosForBlade({
+                testMode: true,
+                autoDetectMobile: true,
+                globalStyles: true
+              });
+              
+              // Enable HMR for Onairos components
+              if (import.meta.hot) {
+                import.meta.hot.on('onairos:update', () => {
+                  console.log('🔥 Onairos components updated');
+                  window.location.reload();
+                });
+              }
+            </script>
+          `;
+          
+          return html.replace('<head>', `<head>${initScript}`);
+        }
+        return html;
+      }
+    },
+
+    generateBundle(options, bundle) {
+      // Add Onairos assets to the build output
+      if (config.autoImport) {
+        // Create a separate chunk for Laravel integration
+        this.emitFile({
+          type: 'chunk',
+          id: 'onairos-laravel-integration',
+          fileName: 'onairos-laravel.js'
+        });
+      }
+    },
+
+    writeBundle(options, bundle) {
+      // Create Laravel-specific integration files
+      const laravelIntegrationCode = `
+// Onairos Laravel Integration
+import { initializeOnairosForBlade, createOnairosButton } from 'onairos/blade';
+
+// Auto-initialize for production
+document.addEventListener('DOMContentLoaded', () => {
+  initializeOnairosForBlade({
+    testMode: false,
+    autoDetectMobile: true,
+    globalStyles: true
+  });
+});
+
+// Export for manual usage
+window.Onairos = {
+  init: initializeOnairosForBlade,
+  createButton: createOnairosButton
+};
+      `;
+
+      // Write the integration file
+      this.emitFile({
+        type: 'asset',
+        fileName: 'onairos-laravel-integration.js',
+        source: laravelIntegrationCode
+      });
+    }
+  };
+}
+
+// Vue.js specific plugin for Laravel
+export function onairosVuePlugin(options = {}) {
+  return {
+    name: 'onairos-vue-laravel',
+    config(viteConfig) {
+      // Add Vue-specific optimizations for Onairos
+      viteConfig.optimizeDeps = viteConfig.optimizeDeps || {};
+      viteConfig.optimizeDeps.include = viteConfig.optimizeDeps.include || [];
+      viteConfig.optimizeDeps.include.push('onairos', 'vue');
+    },
+    
+    transform(code, id) {
+      // Auto-import Onairos in Vue components
+      if (id.endsWith('.vue') && options.autoImport) {
+        if (code.includes('OnairosButton') && !code.includes('import.*OnairosButton')) {
+          return `import { OnairosButton } from 'onairos';\n${code}`;
+        }
+      }
+      return null;
+    }
+  };
+}
+
+// React specific plugin for Laravel  
+export function onairosReactPlugin(options = {}) {
+  return {
+    name: 'onairos-react-laravel',
+    config(viteConfig) {
+      // Add React-specific optimizations for Onairos
+      viteConfig.optimizeDeps = viteConfig.optimizeDeps || {};
+      viteConfig.optimizeDeps.include = viteConfig.optimizeDeps.include || [];
+      viteConfig.optimizeDeps.include.push('onairos', 'react', 'react-dom');
+    },
+    
+    transform(code, id) {
+      // Auto-import Onairos in React components
+      if ((id.endsWith('.jsx') || id.endsWith('.tsx')) && options.autoImport) {
+        if (code.includes('OnairosButton') && !code.includes('import.*OnairosButton')) {
+          return `import { OnairosButton } from 'onairos';\n${code}`;
+        }
+      }
+      return null;
+    }
+  };
+}
+
+export default onairosLaravelPlugin; 

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
 };