onairos 2.1.13 → 2.2.0
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/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/DataRequest.js +250 -109
- package/src/onairosButton.jsx +1 -0
- package/test-enhanced-data-request.html +271 -0
|
@@ -0,0 +1,271 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Enhanced Data Request Test - Onairos v2.2.0</title>
|
|
7
|
+
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
|
|
8
|
+
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
|
|
9
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
10
|
+
<style>
|
|
11
|
+
body {
|
|
12
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
|
13
|
+
margin: 0;
|
|
14
|
+
padding: 20px;
|
|
15
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
16
|
+
min-height: 100vh;
|
|
17
|
+
}
|
|
18
|
+
.demo-container {
|
|
19
|
+
max-width: 1200px;
|
|
20
|
+
margin: 0 auto;
|
|
21
|
+
background: white;
|
|
22
|
+
border-radius: 16px;
|
|
23
|
+
padding: 20px;
|
|
24
|
+
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
|
|
25
|
+
}
|
|
26
|
+
.feature-badge {
|
|
27
|
+
display: inline-block;
|
|
28
|
+
padding: 4px 8px;
|
|
29
|
+
background: #10b981;
|
|
30
|
+
color: white;
|
|
31
|
+
font-size: 10px;
|
|
32
|
+
border-radius: 12px;
|
|
33
|
+
margin: 2px;
|
|
34
|
+
}
|
|
35
|
+
.version-banner {
|
|
36
|
+
background: linear-gradient(45deg, #667eea, #764ba2);
|
|
37
|
+
color: white;
|
|
38
|
+
text-align: center;
|
|
39
|
+
padding: 15px;
|
|
40
|
+
border-radius: 12px;
|
|
41
|
+
margin-bottom: 20px;
|
|
42
|
+
}
|
|
43
|
+
.demo-grid {
|
|
44
|
+
display: grid;
|
|
45
|
+
grid-template-columns: 1fr 1fr;
|
|
46
|
+
gap: 20px;
|
|
47
|
+
align-items: start;
|
|
48
|
+
}
|
|
49
|
+
.features-list {
|
|
50
|
+
background: #f8fafc;
|
|
51
|
+
padding: 20px;
|
|
52
|
+
border-radius: 12px;
|
|
53
|
+
border: 2px solid #e2e8f0;
|
|
54
|
+
}
|
|
55
|
+
@media (max-width: 768px) {
|
|
56
|
+
.demo-grid {
|
|
57
|
+
grid-template-columns: 1fr;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
</style>
|
|
61
|
+
</head>
|
|
62
|
+
<body>
|
|
63
|
+
<div class="demo-container">
|
|
64
|
+
<div class="version-banner">
|
|
65
|
+
<h1 class="text-2xl font-bold mb-2">🎉 Onairos SDK v2.2.0 - Enhanced Data Request</h1>
|
|
66
|
+
<p class="opacity-90">Complete overhaul of the DataRequest component with platform connectors and enhanced UX</p>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<div class="demo-grid">
|
|
70
|
+
<!-- Live Demo -->
|
|
71
|
+
<div>
|
|
72
|
+
<h2 class="text-xl font-bold mb-4 text-center">📊 Live Demo</h2>
|
|
73
|
+
<div id="data-request-demo" class="flex justify-center"></div>
|
|
74
|
+
</div>
|
|
75
|
+
|
|
76
|
+
<!-- Features Overview -->
|
|
77
|
+
<div class="features-list">
|
|
78
|
+
<h3 class="text-lg font-bold mb-4">✨ New Features Implemented</h3>
|
|
79
|
+
|
|
80
|
+
<div class="mb-4">
|
|
81
|
+
<h4 class="font-semibold text-green-700 mb-2">🔌 Platform Connectors</h4>
|
|
82
|
+
<div class="text-sm text-gray-700 mb-2">
|
|
83
|
+
✅ Correct icons (📺 YouTube, 💼 LinkedIn, 🔥 Reddit, etc.)<br>
|
|
84
|
+
✅ Visual connection status (connected/not connected)<br>
|
|
85
|
+
✅ Selection feedback (green checkmark when selected)<br>
|
|
86
|
+
✅ Click to select/deselect connected platforms
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
|
|
90
|
+
<div class="mb-4">
|
|
91
|
+
<h4 class="font-semibold text-blue-700 mb-2">🔒 Auto-Selected Basic Profile</h4>
|
|
92
|
+
<div class="text-sm text-gray-700 mb-2">
|
|
93
|
+
✅ Basic Info is automatically selected<br>
|
|
94
|
+
✅ Cannot be deselected (grayed out)<br>
|
|
95
|
+
✅ Marked as "Required" with visual indicator<br>
|
|
96
|
+
✅ Essential for all data requests
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<div class="mb-4">
|
|
101
|
+
<h4 class="font-semibold text-purple-700 mb-2">💡 Enhanced Tooltips</h4>
|
|
102
|
+
<div class="text-sm text-gray-700 mb-2">
|
|
103
|
+
✅ Underlined titles with hover tooltips<br>
|
|
104
|
+
✅ Detailed explanations for each data type<br>
|
|
105
|
+
✅ Privacy links for transparency<br>
|
|
106
|
+
✅ "Learn more about privacy →" links
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<div class="mb-4">
|
|
111
|
+
<h4 class="font-semibold text-orange-700 mb-2">🎨 Visual Feedback</h4>
|
|
112
|
+
<div class="text-sm text-gray-700 mb-2">
|
|
113
|
+
✅ Green borders for selected connectors<br>
|
|
114
|
+
✅ Checkmarks for selected platforms<br>
|
|
115
|
+
✅ Status messages ("Selected", "Tap to select")<br>
|
|
116
|
+
✅ Warning when no platforms connected
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
|
|
120
|
+
<div class="mb-4">
|
|
121
|
+
<h4 class="font-semibold text-indigo-700 mb-2">🔄 Smart Flow Integration</h4>
|
|
122
|
+
<div class="text-sm text-gray-700">
|
|
123
|
+
✅ Receives connected accounts from onboarding<br>
|
|
124
|
+
✅ Shows only platforms connected in previous steps<br>
|
|
125
|
+
✅ Passes selection to backend for processing<br>
|
|
126
|
+
✅ Enhanced data request payload
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
|
|
130
|
+
<div class="mt-6 p-3 bg-blue-50 border border-blue-200 rounded-lg">
|
|
131
|
+
<p class="text-blue-800 text-sm font-medium">
|
|
132
|
+
💡 Hover over underlined titles in the demo to see tooltips!
|
|
133
|
+
</p>
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
|
|
138
|
+
<!-- Usage Instructions -->
|
|
139
|
+
<div class="mt-8 p-4 bg-gray-50 border border-gray-200 rounded-lg">
|
|
140
|
+
<h3 class="font-bold mb-3">📋 What to Test</h3>
|
|
141
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
|
142
|
+
<div>
|
|
143
|
+
<h4 class="font-semibold text-gray-900 mb-2">Data Types Section:</h4>
|
|
144
|
+
<ul class="list-disc list-inside space-y-1 text-gray-700">
|
|
145
|
+
<li>Hover over underlined titles to see tooltips</li>
|
|
146
|
+
<li>Notice "Basic Info" is auto-selected and grayed out</li>
|
|
147
|
+
<li>Toggle "Personality" and "Preferences"</li>
|
|
148
|
+
<li>Click privacy links in tooltips</li>
|
|
149
|
+
</ul>
|
|
150
|
+
</div>
|
|
151
|
+
<div>
|
|
152
|
+
<h4 class="font-semibold text-gray-900 mb-2">Data Connectors Section:</h4>
|
|
153
|
+
<ul class="list-disc list-inside space-y-1 text-gray-700">
|
|
154
|
+
<li>Click connected platforms to select them</li>
|
|
155
|
+
<li>See visual feedback (green borders, checkmarks)</li>
|
|
156
|
+
<li>Notice disabled state for unconnected platforms</li>
|
|
157
|
+
<li>Check selection count in summary</li>
|
|
158
|
+
</ul>
|
|
159
|
+
</div>
|
|
160
|
+
</div>
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
|
|
164
|
+
<!-- Load the enhanced Onairos SDK -->
|
|
165
|
+
<script src="./dist/onairos.bundle.js"></script>
|
|
166
|
+
|
|
167
|
+
<script>
|
|
168
|
+
// Simulate connected accounts for demo
|
|
169
|
+
const mockConnectedAccounts = {
|
|
170
|
+
'YouTube': true,
|
|
171
|
+
'LinkedIn': true,
|
|
172
|
+
'Reddit': true,
|
|
173
|
+
'Instagram': false,
|
|
174
|
+
'Pinterest': false,
|
|
175
|
+
'GitHub': false,
|
|
176
|
+
'Facebook': false,
|
|
177
|
+
'Gmail': true
|
|
178
|
+
};
|
|
179
|
+
|
|
180
|
+
if (typeof window.Onairos !== 'undefined' && window.Onairos.OnairosButton) {
|
|
181
|
+
console.log('🎯 Onairos SDK v2.2.0 loaded successfully');
|
|
182
|
+
|
|
183
|
+
// Access DataRequest component directly for testing
|
|
184
|
+
// In real usage, this would be accessed through the OnairosButton flow
|
|
185
|
+
|
|
186
|
+
// For this demo, we'll simulate the full OnairosButton with skipToDataRequest
|
|
187
|
+
const { OnairosButton, initializeApiKey } = window.Onairos;
|
|
188
|
+
|
|
189
|
+
function handleComplete(result) {
|
|
190
|
+
console.log('✅ Data request completed:', result);
|
|
191
|
+
|
|
192
|
+
const summary = [
|
|
193
|
+
`Data types: ${result.approvedData?.join(', ') || 'None'}`,
|
|
194
|
+
`Connectors: ${result.selectedConnectors?.join(', ') || 'None'}`,
|
|
195
|
+
`Total selections: ${(result.approvedData?.length || 0) + (result.selectedConnectors?.length || 0)}`
|
|
196
|
+
];
|
|
197
|
+
|
|
198
|
+
alert(`Data Request Completed!\n\n${summary.join('\n')}\n\nCheck console for full details.`);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
// Initialize SDK
|
|
202
|
+
initializeApiKey({
|
|
203
|
+
apiKey: 'onairos_web_sdk_live_key_2024',
|
|
204
|
+
environment: 'development',
|
|
205
|
+
enableLogging: true
|
|
206
|
+
}).then(() => {
|
|
207
|
+
console.log('🔧 SDK initialized');
|
|
208
|
+
|
|
209
|
+
// For demo purposes, we'll create a custom component that shows DataRequest directly
|
|
210
|
+
const DataRequestDemo = () => {
|
|
211
|
+
// Mock user data with connected accounts
|
|
212
|
+
const mockUserData = {
|
|
213
|
+
email: 'demo@onairos.uk',
|
|
214
|
+
connectedAccounts: mockConnectedAccounts,
|
|
215
|
+
verified: true
|
|
216
|
+
};
|
|
217
|
+
|
|
218
|
+
// Get DataRequest component (we'll need to import it directly)
|
|
219
|
+
// For now, let's use the OnairosButton but force it to show DataRequest
|
|
220
|
+
return React.createElement('div', {
|
|
221
|
+
className: 'bg-white p-4 rounded-lg shadow-lg',
|
|
222
|
+
style: { minHeight: '500px' }
|
|
223
|
+
}, [
|
|
224
|
+
React.createElement('div', {
|
|
225
|
+
key: 'header',
|
|
226
|
+
className: 'text-center mb-4'
|
|
227
|
+
}, [
|
|
228
|
+
React.createElement('h3', {
|
|
229
|
+
key: 'title',
|
|
230
|
+
className: 'font-bold text-gray-900'
|
|
231
|
+
}, 'Enhanced DataRequest Component'),
|
|
232
|
+
React.createElement('p', {
|
|
233
|
+
key: 'subtitle',
|
|
234
|
+
className: 'text-sm text-gray-600'
|
|
235
|
+
}, 'Simulated with connected platforms: YouTube, LinkedIn, Reddit, Gmail')
|
|
236
|
+
]),
|
|
237
|
+
React.createElement('div', {
|
|
238
|
+
key: 'notice',
|
|
239
|
+
className: 'p-3 bg-blue-50 border border-blue-200 rounded-lg text-center'
|
|
240
|
+
}, [
|
|
241
|
+
React.createElement('p', {
|
|
242
|
+
key: 'text',
|
|
243
|
+
className: 'text-blue-800 text-sm'
|
|
244
|
+
}, '🚧 Direct DataRequest demo would require component extraction.'),
|
|
245
|
+
React.createElement('p', {
|
|
246
|
+
key: 'instruction',
|
|
247
|
+
className: 'text-blue-700 text-xs mt-1'
|
|
248
|
+
}, 'Use the full OnairosButton flow to see the enhanced DataRequest in action.')
|
|
249
|
+
])
|
|
250
|
+
]);
|
|
251
|
+
};
|
|
252
|
+
|
|
253
|
+
ReactDOM.render(React.createElement(DataRequestDemo), document.getElementById('data-request-demo'));
|
|
254
|
+
|
|
255
|
+
console.log('🚀 Enhanced DataRequest demo ready');
|
|
256
|
+
console.log('📊 Mock connected accounts:', mockConnectedAccounts);
|
|
257
|
+
|
|
258
|
+
}).catch(error => {
|
|
259
|
+
console.error('❌ SDK initialization failed:', error);
|
|
260
|
+
document.getElementById('data-request-demo').innerHTML =
|
|
261
|
+
`<div class="text-red-600 text-center p-4">SDK initialization failed: ${error.message}</div>`;
|
|
262
|
+
});
|
|
263
|
+
|
|
264
|
+
} else {
|
|
265
|
+
console.error('❌ Onairos SDK not found');
|
|
266
|
+
document.getElementById('data-request-demo').innerHTML =
|
|
267
|
+
'<div class="text-red-600 text-center p-4">Onairos SDK not found</div>';
|
|
268
|
+
}
|
|
269
|
+
</script>
|
|
270
|
+
</body>
|
|
271
|
+
</html>
|