onairos 2.0.6 → 2.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/iframe.bundle.js +1 -1
- package/dist/iframe.bundle.js.map +1 -1
- package/dist/onairos.bundle.js +1 -1
- package/dist/onairos.bundle.js.map +1 -1
- package/dist/onairos.esm.js +1 -1
- package/dist/onairos.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/UniversalOnboarding.js +98 -98
package/package.json
CHANGED
|
@@ -19,8 +19,6 @@ export default function UniversalOnboarding({ onComplete, appIcon, appName = 'Ap
|
|
|
19
19
|
if (isConnecting) return;
|
|
20
20
|
|
|
21
21
|
setIsConnecting(true);
|
|
22
|
-
|
|
23
|
-
// Simulate connection delay
|
|
24
22
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
25
23
|
|
|
26
24
|
setConnectedAccounts(prev => ({
|
|
@@ -45,112 +43,114 @@ export default function UniversalOnboarding({ onComplete, appIcon, appName = 'Ap
|
|
|
45
43
|
const connectedCount = Object.values(connectedAccounts).filter(Boolean).length;
|
|
46
44
|
|
|
47
45
|
return (
|
|
48
|
-
<div className="max-w-md mx-auto bg-white
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
<div className="flex items-center
|
|
52
|
-
<
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
<
|
|
59
|
-
<
|
|
60
|
-
|
|
46
|
+
<div className="w-full max-w-md mx-auto bg-white rounded-lg shadow-xl overflow-hidden" style={{ maxHeight: '90vh', height: 'auto' }}>
|
|
47
|
+
<div className="p-4 sm:p-6 overflow-y-auto" style={{ maxHeight: 'calc(90vh - 4rem)' }}>
|
|
48
|
+
{/* Header with App Logo and Arrow to Onairos */}
|
|
49
|
+
<div className="flex items-center justify-center mb-4 sm:mb-6">
|
|
50
|
+
<div className="flex items-center space-x-3">
|
|
51
|
+
<img
|
|
52
|
+
src={appIcon || "https://onairos.sirv.com/Images/OnairosBlack.png"}
|
|
53
|
+
alt={appName}
|
|
54
|
+
className="w-8 h-8 sm:w-10 sm:h-10 rounded-lg"
|
|
55
|
+
/>
|
|
56
|
+
<div className="flex items-center text-gray-400">
|
|
57
|
+
<svg className="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
58
|
+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
|
59
|
+
</svg>
|
|
60
|
+
</div>
|
|
61
|
+
<img
|
|
62
|
+
src="https://onairos.sirv.com/Images/OnairosBlack.png"
|
|
63
|
+
alt="Onairos"
|
|
64
|
+
className="w-8 h-8 sm:w-10 sm:h-10 rounded-lg"
|
|
65
|
+
/>
|
|
61
66
|
</div>
|
|
62
|
-
<img
|
|
63
|
-
src="https://onairos.sirv.com/Images/OnairosBlack.png"
|
|
64
|
-
alt="Onairos"
|
|
65
|
-
className="w-10 h-10 rounded-lg"
|
|
66
|
-
/>
|
|
67
67
|
</div>
|
|
68
|
-
</div>
|
|
69
68
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
69
|
+
<div className="text-center mb-4 sm:mb-6">
|
|
70
|
+
<h2 className="text-lg sm:text-xl font-bold text-gray-900 mb-2">Connect Your Accounts</h2>
|
|
71
|
+
<p className="text-gray-600 text-xs sm:text-sm">
|
|
72
|
+
Choose which accounts to connect for a personalized experience
|
|
73
|
+
</p>
|
|
74
|
+
</div>
|
|
76
75
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
76
|
+
{/* Privacy Notice */}
|
|
77
|
+
<div className="mb-4 sm:mb-6 p-2 sm:p-3 bg-blue-50 border border-blue-200 rounded-lg">
|
|
78
|
+
<p className="text-blue-800 text-xs sm:text-sm">
|
|
79
|
+
🔒 Your data is never shared with anyone. It's only used to train your personal model and is stored securely.
|
|
80
|
+
</p>
|
|
81
|
+
</div>
|
|
83
82
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
83
|
+
{/* Platform List - Vertical Layout with Toggles */}
|
|
84
|
+
<div className="space-y-2 sm:space-y-3 mb-4 sm:mb-6">
|
|
85
|
+
{platforms.map((platform) => {
|
|
86
|
+
const isConnected = connectedAccounts[platform.name] || false;
|
|
87
|
+
|
|
88
|
+
return (
|
|
89
|
+
<div
|
|
90
|
+
key={platform.name}
|
|
91
|
+
className="flex items-center justify-between p-3 sm:p-4 border rounded-lg hover:bg-gray-50 transition-colors"
|
|
92
|
+
>
|
|
93
|
+
<div className="flex items-center space-x-3">
|
|
94
|
+
<div className={`w-8 h-8 sm:w-10 sm:h-10 rounded-lg ${platform.color} flex items-center justify-center text-white text-base sm:text-lg`}>
|
|
95
|
+
{platform.icon}
|
|
96
|
+
</div>
|
|
97
|
+
<div>
|
|
98
|
+
<h3 className="font-medium text-gray-900 text-sm sm:text-base">{platform.name}</h3>
|
|
99
|
+
<p className="text-xs sm:text-sm text-gray-500">
|
|
100
|
+
{isConnected ? 'Connected' : 'Not connected'}
|
|
101
|
+
</p>
|
|
102
|
+
</div>
|
|
103
103
|
</div>
|
|
104
|
+
|
|
105
|
+
{/* Toggle Switch */}
|
|
106
|
+
<button
|
|
107
|
+
onClick={() => handleToggle(platform.name)}
|
|
108
|
+
disabled={isConnecting}
|
|
109
|
+
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 ${
|
|
110
|
+
isConnected ? 'bg-blue-600' : 'bg-gray-200'
|
|
111
|
+
} ${isConnecting ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
|
|
112
|
+
>
|
|
113
|
+
<span
|
|
114
|
+
className={`inline-block h-3 sm:h-4 w-3 sm:w-4 transform rounded-full bg-white transition-transform ${
|
|
115
|
+
isConnected ? 'translate-x-5 sm:translate-x-6' : 'translate-x-1'
|
|
116
|
+
}`}
|
|
117
|
+
/>
|
|
118
|
+
</button>
|
|
104
119
|
</div>
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
<button
|
|
108
|
-
onClick={() => handleToggle(platform.name)}
|
|
109
|
-
disabled={isConnecting}
|
|
110
|
-
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
|
|
111
|
-
isConnected ? 'bg-blue-600' : 'bg-gray-200'
|
|
112
|
-
} ${isConnecting ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
|
|
113
|
-
>
|
|
114
|
-
<span
|
|
115
|
-
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
|
|
116
|
-
isConnected ? 'translate-x-6' : 'translate-x-1'
|
|
117
|
-
}`}
|
|
118
|
-
/>
|
|
119
|
-
</button>
|
|
120
|
-
</div>
|
|
121
|
-
);
|
|
122
|
-
})}
|
|
123
|
-
</div>
|
|
124
|
-
|
|
125
|
-
{/* Connection Status */}
|
|
126
|
-
{connectedCount > 0 && (
|
|
127
|
-
<div className="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg">
|
|
128
|
-
<p className="text-green-800 text-sm">
|
|
129
|
-
✅ {connectedCount} account{connectedCount > 1 ? 's' : ''} connected
|
|
130
|
-
</p>
|
|
120
|
+
);
|
|
121
|
+
})}
|
|
131
122
|
</div>
|
|
132
|
-
)}
|
|
133
123
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
124
|
+
{/* Connection Status */}
|
|
125
|
+
{connectedCount > 0 && (
|
|
126
|
+
<div className="mb-3 sm:mb-4 p-2 sm:p-3 bg-green-50 border border-green-200 rounded-lg">
|
|
127
|
+
<p className="text-green-800 text-xs sm:text-sm">
|
|
128
|
+
✅ {connectedCount} account{connectedCount > 1 ? 's' : ''} connected
|
|
129
|
+
</p>
|
|
130
|
+
</div>
|
|
131
|
+
)}
|
|
132
|
+
|
|
133
|
+
{/* Continue Button */}
|
|
134
|
+
<button
|
|
135
|
+
onClick={handleContinue}
|
|
136
|
+
disabled={connectedCount === 0}
|
|
137
|
+
className={`w-full py-2 sm:py-3 px-4 rounded-lg font-semibold transition-colors text-sm sm:text-base ${
|
|
138
|
+
connectedCount > 0
|
|
139
|
+
? 'bg-blue-600 text-white hover:bg-blue-700'
|
|
140
|
+
: 'bg-gray-300 text-gray-500 cursor-not-allowed'
|
|
141
|
+
}`}
|
|
142
|
+
>
|
|
143
|
+
Continue {connectedCount > 0 ? `with ${connectedCount} account${connectedCount > 1 ? 's' : ''}` : ''}
|
|
144
|
+
</button>
|
|
146
145
|
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
146
|
+
{/* Skip Option */}
|
|
147
|
+
<button
|
|
148
|
+
onClick={() => onComplete({ connectedAccounts: [], totalConnections: 0 })}
|
|
149
|
+
className="w-full mt-2 py-2 text-gray-500 hover:text-gray-700 text-xs sm:text-sm"
|
|
150
|
+
>
|
|
151
|
+
Skip for now
|
|
152
|
+
</button>
|
|
153
|
+
</div>
|
|
154
154
|
</div>
|
|
155
155
|
);
|
|
156
156
|
}
|