onairos 2.2.0 → 2.3.0

package/src/components/DataRequest.js

@@ -1,16 +1,16 @@
 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' }
-];
+// 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 = [
   { 
@@ -37,7 +37,7 @@ const dataTypes = [
     description: 'User preferences, interests, settings and personal choices', 
     icon: '⚙️',
     required: false,
-    tooltip: 'Your likes, interests, content preferences, and behavioral patterns. Helps create a more personalized experience.',
+    tooltip: 'Your stated preferences and interests from connected platforms. Helps customize your experience.',
     privacyLink: 'https://onairos.uk/privacy#preferences-data'
   }
 ];
@@ -86,23 +86,24 @@ export default function DataRequest({
     preferences: false
   });
   
-  const [connectorStates, setConnectorStates] = useState({});
+  // 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);
 
-  // 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]);
+  // 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
@@ -115,15 +116,7 @@ export default function DataRequest({
     }));
   };
 
-  const handleConnectorToggle = (platformName) => {
-    setConnectorStates(prev => ({
-      ...prev,
-      [platformName]: {
-        ...prev[platformName],
-        selected: !prev[platformName]?.selected
-      }
-    }));
-  };
+  // handleConnectorToggle removed - connectors are handled in onboarding
 
   const handleRowClick = (dataId) => {
     const dataType = dataTypes.find(dt => dt.id === dataId);
@@ -155,9 +148,9 @@ export default function DataRequest({
         .map(([key]) => key);
 
       // Get selected connectors
-      const selectedConnectors = Object.entries(connectorStates)
-        .filter(([platform, state]) => state.selected && state.connected)
-        .map(([platform]) => platform);
+      // const selectedConnectors = Object.entries(connectorStates)
+      //   .filter(([platform, state]) => state.selected && state.connected)
+      //   .map(([platform]) => platform);
 
       const mapDataTypesToConfirmations = (approvedData) => {
         const confirmations = [];
@@ -189,7 +182,7 @@ export default function DataRequest({
         userHash,
         appName,
         approvedData,
-        selectedConnectors,
+        // selectedConnectors, // Removed as connectors are handled in onboarding
         apiUrl: apiEndpoint,
         testMode,
         timestamp: new Date().toISOString()
@@ -201,7 +194,7 @@ export default function DataRequest({
           
           const requestBody = testMode ? {
             approvedData,
-            selectedConnectors,
+            // selectedConnectors, // Removed as connectors are handled in onboarding
             userEmail,
             appName,
             testMode,
@@ -211,7 +204,7 @@ export default function DataRequest({
               storage: "local",
               appId: appName,
               confirmations: confirmations,
-              connectors: selectedConnectors,
+              // connectors: selectedConnectors, // Removed as connectors are handled in onboarding
               EncryptedUserPin: "pending_pin_integration",
               account: userEmail,
               proofMode: false,
@@ -297,8 +290,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;
+  // 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' }}>
@@ -378,65 +371,10 @@ export default function DataRequest({
           </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>
-                  
-                  <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' : ''} and {selectedConnectorCount} connector{selectedConnectorCount > 1 ? 's' : ''} selected
+            ✅ {selectedCount} data type{selectedCount > 1 ? 's' : ''} selected
           </p>
         </div>
 

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>