onairos 2.2.1 → 2.3.0

package/src/laravel/OnairosVue.vue

@@ -0,0 +1,398 @@
+<template>
+  <div class="onairos-vue-wrapper">
+    <!-- Loading State -->
+    <div v-if="isLoading" class="onairos-loading">
+      <div class="onairos-spinner"></div>
+      <span>{{ loadingText }}</span>
+    </div>
+
+    <!-- Button State -->
+    <button 
+      v-else
+      :class="buttonClasses"
+      :disabled="disabled"
+      @click="handleClick"
+    >
+      <slot name="icon" v-if="$slots.icon"></slot>
+      <span :class="textClasses">
+        <slot>{{ buttonText }}</slot>
+      </span>
+    </button>
+
+    <!-- Success Message -->
+    <div v-if="showSuccess" class="onairos-success">
+      ✅ {{ successMessage }}
+    </div>
+
+    <!-- Error Message -->
+    <div v-if="error" class="onairos-error">
+      ❌ {{ error }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, defineEmits, defineProps } from 'vue';
+
+// Props
+const props = defineProps({
+  requestData: {
+    type: [Array, Object],
+    default: () => ['email', 'profile']
+  },
+  webpageName: {
+    type: String,
+    default: 'Laravel Vue App'
+  },
+  testMode: {
+    type: Boolean,
+    default: false
+  },
+  autoFetch: {
+    type: Boolean,
+    default: true
+  },
+  buttonType: {
+    type: String,
+    default: 'pill',
+    validator: (value) => ['pill', 'icon', 'rounded'].includes(value)
+  },
+  textColor: {
+    type: String,
+    default: 'white'
+  },
+  textLayout: {
+    type: String,
+    default: 'center',
+    validator: (value) => ['left', 'center', 'right'].includes(value)
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  customClass: {
+    type: String,
+    default: ''
+  },
+  loadingText: {
+    type: String,
+    default: 'Connecting...'
+  },
+  successMessage: {
+    type: String,
+    default: 'Successfully connected!'
+  },
+  size: {
+    type: String,
+    default: 'medium',
+    validator: (value) => ['small', 'medium', 'large'].includes(value)
+  }
+});
+
+// Emits
+const emit = defineEmits(['complete', 'error', 'loading', 'click']);
+
+// Reactive state
+const isLoading = ref(false);
+const showSuccess = ref(false);
+const error = ref(null);
+
+// Computed properties
+const buttonText = computed(() => {
+  if (isLoading.value) return props.loadingText;
+  return 'Connect with Onairos';
+});
+
+const buttonClasses = computed(() => {
+  const baseClasses = ['onairos-vue-btn'];
+  
+  // Button type
+  baseClasses.push(`onairos-btn-${props.buttonType}`);
+  
+  // Size
+  baseClasses.push(`onairos-btn-${props.size}`);
+  
+  // States
+  if (isLoading.value) baseClasses.push('onairos-btn-loading');
+  if (props.disabled) baseClasses.push('onairos-btn-disabled');
+  
+  // Custom class
+  if (props.customClass) baseClasses.push(props.customClass);
+  
+  return baseClasses.join(' ');
+});
+
+const textClasses = computed(() => {
+  return [
+    'onairos-btn-text',
+    `onairos-text-${props.textLayout}`,
+    `onairos-text-color-${props.textColor}`
+  ].join(' ');
+});
+
+// Methods
+async function handleClick() {
+  if (isLoading.value || props.disabled) return;
+
+  try {
+    isLoading.value = true;
+    error.value = null;
+    emit('loading', true);
+    emit('click');
+
+    // Simulate connection process
+    const result = await initializeOnairosConnection();
+    
+    showSuccess.value = true;
+    setTimeout(() => {
+      showSuccess.value = false;
+    }, 3000);
+
+    emit('complete', result);
+  } catch (err) {
+    error.value = err.message || 'Connection failed';
+    emit('error', err);
+  } finally {
+    isLoading.value = false;
+    emit('loading', false);
+  }
+}
+
+async function initializeOnairosConnection() {
+  // Check if global Onairos is available
+  if (typeof window.createOnairosButton === 'function') {
+    return new Promise((resolve, reject) => {
+      // Use the global Blade helper
+      const config = {
+        requestData: props.requestData,
+        webpageName: props.webpageName,
+        testMode: props.testMode,
+        autoFetch: props.autoFetch,
+        onComplete: (result) => {
+          resolve(result);
+        },
+        onError: (err) => {
+          reject(err);
+        }
+      };
+
+      // Trigger the connection flow
+      const tempId = `temp-${Date.now()}`;
+      const tempElement = document.createElement('div');
+      tempElement.id = tempId;
+      tempElement.style.display = 'none';
+      document.body.appendChild(tempElement);
+
+      window.createOnairosButton(tempId, config);
+      
+      // Trigger the button click programmatically
+      setTimeout(() => {
+        const btn = document.querySelector(`#${tempId}-btn`);
+        if (btn) btn.click();
+      }, 100);
+    });
+  } else {
+    // Fallback: dynamic import of OnairosButton
+    const { OnairosButton } = await import('onairos');
+    
+    return new Promise((resolve, reject) => {
+      // Create a temporary React component mount
+      const config = {
+        requestData: props.requestData,
+        webpageName: props.webpageName,
+        testMode: props.testMode,
+        autoFetch: props.autoFetch,
+        onComplete: resolve,
+        onError: reject
+      };
+
+      // This would need React DOM integration
+      // For now, we'll resolve with a mock result
+      setTimeout(() => {
+        resolve({
+          success: true,
+          data: 'Mock connection successful',
+          timestamp: new Date().toISOString()
+        });
+      }, 2000);
+    });
+  }
+}
+
+// Lifecycle
+onMounted(() => {
+  // Initialize any needed global configurations
+  if (typeof window.initializeOnairosForBlade === 'function') {
+    window.initializeOnairosForBlade({
+      testMode: props.testMode,
+      autoDetectMobile: true,
+      globalStyles: false // Vue component will handle its own styles
+    });
+  }
+});
+</script>
+
+<style scoped>
+.onairos-vue-wrapper {
+  display: inline-block;
+  position: relative;
+}
+
+.onairos-vue-btn {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border: none;
+  color: white;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+  outline: none;
+}
+
+.onairos-vue-btn:hover:not(.onairos-btn-disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
+}
+
+.onairos-vue-btn:active:not(.onairos-btn-disabled) {
+  transform: translateY(0);
+}
+
+/* Button Types */
+.onairos-btn-pill {
+  border-radius: 25px;
+}
+
+.onairos-btn-rounded {
+  border-radius: 8px;
+}
+
+.onairos-btn-icon {
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Sizes */
+.onairos-btn-small {
+  padding: 8px 16px;
+  font-size: 12px;
+}
+
+.onairos-btn-medium {
+  padding: 12px 24px;
+  font-size: 14px;
+}
+
+.onairos-btn-large {
+  padding: 16px 32px;
+  font-size: 16px;
+}
+
+.onairos-btn-icon.onairos-btn-small {
+  width: 35px;
+  height: 35px;
+}
+
+.onairos-btn-icon.onairos-btn-large {
+  width: 60px;
+  height: 60px;
+}
+
+/* Text Layout */
+.onairos-text-left {
+  text-align: left;
+}
+
+.onairos-text-center {
+  text-align: center;
+}
+
+.onairos-text-right {
+  text-align: right;
+}
+
+/* States */
+.onairos-btn-loading {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.onairos-btn-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Loading Spinner */
+.onairos-loading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  background: #f8f9fa;
+  border-radius: 25px;
+  border: 1px solid #e9ecef;
+}
+
+.onairos-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #e9ecef;
+  border-top: 2px solid #667eea;
+  border-radius: 50%;
+  animation: onairos-spin 1s linear infinite;
+}
+
+@keyframes onairos-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Success/Error Messages */
+.onairos-success,
+.onairos-error {
+  margin-top: 8px;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.onairos-success {
+  background: #d4edda;
+  color: #155724;
+  border: 1px solid #c3e6cb;
+}
+
+.onairos-error {
+  background: #f8d7da;
+  color: #721c24;
+  border: 1px solid #f5c6cb;
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+  .onairos-btn-medium {
+    width: 100%;
+    padding: 15px 20px;
+    font-size: 16px;
+  }
+  
+  .onairos-btn-small {
+    width: 100%;
+    padding: 12px 16px;
+    font-size: 14px;
+  }
+  
+  .onairos-btn-large {
+    width: 100%;
+    padding: 18px 24px;
+    font-size: 18px;
+  }
+}
+</style> 

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