mirror of
https://github.com/christianvidalwolf-prog/CrazeAnalytix.git
synced 2026-08-03 17:05:23 +02:00
401 lines
17 KiB
TypeScript
401 lines
17 KiB
TypeScript
import React, { useState, useMemo } from 'react';
|
|
import { ExperimentCreateInput, ExperimentType, ExperimentMetric } from '../types';
|
|
import { createExperiment } from '../services/experiments';
|
|
|
|
interface ExperimentFormProps {
|
|
onClose: () => void;
|
|
onSuccess: () => void;
|
|
initialAsins?: string[];
|
|
initialMarketplace?: string;
|
|
initialLine?: string;
|
|
availableLines?: string[];
|
|
}
|
|
|
|
const ExperimentForm: React.FC<ExperimentFormProps> = ({
|
|
onClose,
|
|
onSuccess,
|
|
initialAsins = [],
|
|
initialMarketplace = 'DE',
|
|
initialLine = '',
|
|
availableLines = []
|
|
}) => {
|
|
const [formData, setFormData] = useState<ExperimentCreateInput>({
|
|
name: '',
|
|
description: '',
|
|
type: 'pricing',
|
|
asins: initialAsins,
|
|
marketplace: initialMarketplace,
|
|
start_date: new Date().toISOString().split('T')[0],
|
|
end_date: '',
|
|
hypothesis: '',
|
|
primary_metric: 'units',
|
|
target_lift_percent: 10,
|
|
owner: '',
|
|
});
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
const [asinInput, setAsinInput] = useState('');
|
|
const [targetType, setTargetType] = useState<'asin' | 'line'>(initialAsins.length > 0 ? 'asin' : initialLine ? 'line' : 'asin');
|
|
const [selectedLine, setSelectedLine] = useState(initialLine);
|
|
|
|
const handleAddAsin = () => {
|
|
// Support both comma and space separated ASINs
|
|
const newAsins = asinInput
|
|
.split(/[\s,]+/) // Split by space or comma
|
|
.map(a => a.trim().toUpperCase())
|
|
.filter(a => a.length > 0 && /^[A-Z0-9]{9,10}$/.test(a)); // Validate ASIN format
|
|
|
|
const uniqueAsins = Array.from(new Set([...formData.asins, ...newAsins]));
|
|
setFormData({ ...formData, asins: uniqueAsins });
|
|
setAsinInput('');
|
|
};
|
|
|
|
const handleSelectLine = (line: string) => {
|
|
setSelectedLine(line);
|
|
// For line targeting, we don't pre-populate ASINs
|
|
// The backend will handle filtering by line
|
|
setFormData({ ...formData, asins: [`LINE:${line}`] });
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!formData.name || !formData.asins.length) {
|
|
alert('Please fill in required fields');
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
try {
|
|
await createExperiment(formData);
|
|
onSuccess();
|
|
onClose();
|
|
} catch (error: any) {
|
|
alert(`Error creating experiment: ${error.message}`);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const typeOptions: { value: ExperimentType; label: string; icon: string }[] = [
|
|
{ value: 'pricing', label: 'Pricing', icon: '💰' },
|
|
{ value: 'advertising', label: 'Advertising', icon: '📢' },
|
|
{ value: 'content', label: 'Content', icon: '📝' },
|
|
{ value: 'promotion', label: 'Promotion', icon: '🏷️' },
|
|
];
|
|
|
|
const metricOptions: { value: ExperimentMetric; label: string }[] = [
|
|
{ value: 'units', label: 'Units Sold' },
|
|
{ value: 'revenue', label: 'Revenue' },
|
|
{ value: 'acos', label: 'ACOS' },
|
|
{ value: 'ctr', label: 'CTR' },
|
|
{ value: 'cvr', label: 'Conversion Rate' },
|
|
{ value: 'bsr', label: 'BSR' },
|
|
];
|
|
|
|
const marketplaceOptions = ['DE', 'UK', 'FR', 'IT', 'ES'];
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] flex items-center justify-center p-4">
|
|
<div className="bg-slate-900 border border-slate-700 rounded-2xl w-full max-w-3xl max-h-[85vh] overflow-hidden flex flex-col">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between p-4 border-b border-slate-700">
|
|
<h2 className="text-lg font-bold text-white">🧪 New Experiment</h2>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Form */}
|
|
<form onSubmit={handleSubmit} className="flex-1 overflow-y-auto p-4 space-y-4">
|
|
{/* Name */}
|
|
<div>
|
|
<label className="block text-xs font-medium text-slate-300 mb-1">
|
|
Name <span className="text-red-400">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
className="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-1.5 text-sm text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
placeholder="e.g., Q1 Price Reduction Test"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{/* Type & Marketplace */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-medium text-slate-300 mb-1">
|
|
Type <span className="text-red-400">*</span>
|
|
</label>
|
|
<select
|
|
value={formData.type}
|
|
onChange={(e) => setFormData({ ...formData, type: e.target.value as ExperimentType })}
|
|
className="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-1.5 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
>
|
|
<option value="pricing">💰 Pricing</option>
|
|
<option value="advertising">📢 Advertising</option>
|
|
<option value="content">📝 Content</option>
|
|
<option value="promotion">🏷️ Promotion</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-slate-300 mb-1">
|
|
Marketplace <span className="text-red-400">*</span>
|
|
</label>
|
|
<select
|
|
value={formData.marketplace}
|
|
onChange={(e) => setFormData({ ...formData, marketplace: e.target.value })}
|
|
className="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-1.5 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
>
|
|
{marketplaceOptions.map((mp) => (
|
|
<option key={mp} value={mp}>{mp}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Target Type Selector */}
|
|
<div>
|
|
<label className="block text-xs font-medium text-slate-300 mb-2">
|
|
Target Type <span className="text-red-400">*</span>
|
|
</label>
|
|
<div className="flex gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setTargetType('asin');
|
|
setFormData({ ...formData, asins: [] });
|
|
setSelectedLine('');
|
|
}}
|
|
className={`flex-1 px-3 py-2 rounded-lg text-xs font-bold border transition-all ${targetType === 'asin'
|
|
? 'bg-indigo-600/20 border-indigo-500 text-indigo-400'
|
|
: 'bg-slate-800 border-slate-600 text-slate-400 hover:border-slate-500'
|
|
}`}
|
|
>
|
|
🎯 Specific ASINs
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setTargetType('line');
|
|
setFormData({ ...formData, asins: [] });
|
|
setAsinInput('');
|
|
}}
|
|
className={`flex-1 px-3 py-2 rounded-lg text-xs font-bold border transition-all ${targetType === 'line'
|
|
? 'bg-indigo-600/20 border-indigo-500 text-indigo-400'
|
|
: 'bg-slate-800 border-slate-600 text-slate-400 hover:border-slate-500'
|
|
}`}
|
|
>
|
|
📦 Entire Product Line
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{targetType === 'asin' ? (
|
|
/* ASIN Input */
|
|
<div>
|
|
<label className="block text-xs font-medium text-slate-300 mb-1">
|
|
ASINs <span className="text-red-400">*</span>
|
|
</label>
|
|
<div className="flex gap-2 mb-2">
|
|
<input
|
|
type="text"
|
|
value={asinInput}
|
|
onChange={(e) => setAsinInput(e.target.value)}
|
|
onKeyPress={(e) => e.key === 'Enter' && (e.preventDefault(), handleAddAsin())}
|
|
className="flex-1 bg-slate-800 border border-slate-600 rounded-lg px-3 py-1.5 text-sm text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
placeholder="Paste ASINs (space or comma separated)"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={handleAddAsin}
|
|
className="px-3 py-1.5 bg-slate-700 hover:bg-slate-600 text-white rounded-lg text-sm transition-colors"
|
|
>
|
|
Add
|
|
</button>
|
|
</div>
|
|
{formData.asins.length > 0 && !formData.asins.some(a => a.startsWith('LINE:')) && (
|
|
<div className="flex flex-wrap gap-1.5 p-2 bg-slate-800/50 border border-slate-700 rounded-lg max-h-20 overflow-y-auto">
|
|
{formData.asins.map((asin) => (
|
|
<span
|
|
key={asin}
|
|
className="inline-flex items-center gap-1 px-2 py-1 bg-slate-700 border border-slate-600 rounded text-xs text-slate-300 font-mono"
|
|
>
|
|
{asin}
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setFormData({
|
|
...formData,
|
|
asins: formData.asins.filter(a => a !== asin)
|
|
});
|
|
}}
|
|
className="text-slate-400 hover:text-red-400 transition-colors"
|
|
>
|
|
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
<p className="text-[10px] text-slate-500 mt-1">
|
|
💡 Tip: Paste multiple ASINs separated by spaces or commas
|
|
</p>
|
|
</div>
|
|
) : (
|
|
/* Product Line Input */
|
|
<div>
|
|
<label className="block text-xs font-medium text-slate-300 mb-1">
|
|
Product Line <span className="text-red-400">*</span>
|
|
</label>
|
|
<select
|
|
value={selectedLine}
|
|
onChange={(e) => handleSelectLine(e.target.value)}
|
|
className="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-1.5 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
>
|
|
<option value="">Select a product line...</option>
|
|
{availableLines.map((line) => (
|
|
<option key={line} value={line}>{line}</option>
|
|
))}
|
|
</select>
|
|
{selectedLine && (
|
|
<p className="text-[10px] text-emerald-400 mt-1">
|
|
✓ Will target all ASINs in <strong>{selectedLine}</strong>
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Timeline */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-medium text-slate-300 mb-1">
|
|
Start Date <span className="text-red-400">*</span>
|
|
</label>
|
|
<input
|
|
type="date"
|
|
value={formData.start_date}
|
|
onChange={(e) => setFormData({ ...formData, start_date: e.target.value })}
|
|
className="w-full bg-slate-800 border border-slate-600 rounded-lg px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-slate-300 mb-1">
|
|
End Date
|
|
</label>
|
|
<input
|
|
type="date"
|
|
value={formData.end_date}
|
|
onChange={(e) => setFormData({ ...formData, end_date: e.target.value })}
|
|
className="w-full bg-slate-800 border border-slate-600 rounded-lg px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Hypothesis */}
|
|
<div>
|
|
<label className="block text-xs font-medium text-slate-300 mb-1">
|
|
Hypothesis
|
|
</label>
|
|
<textarea
|
|
value={formData.hypothesis}
|
|
onChange={(e) => setFormData({ ...formData, hypothesis: e.target.value })}
|
|
className="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-1.5 text-sm text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none"
|
|
rows={2}
|
|
placeholder="What do you expect to happen?"
|
|
/>
|
|
</div>
|
|
|
|
{/* Metric & Target */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-medium text-slate-300 mb-1">
|
|
Primary Metric
|
|
</label>
|
|
<select
|
|
value={formData.primary_metric}
|
|
onChange={(e) => setFormData({ ...formData, primary_metric: e.target.value as ExperimentMetric })}
|
|
className="w-full bg-slate-800 border border-slate-600 rounded-lg px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
>
|
|
{metricOptions.map((opt) => (
|
|
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-slate-300 mb-1">
|
|
Target Lift (%)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={formData.target_lift_percent}
|
|
onChange={(e) => setFormData({ ...formData, target_lift_percent: parseFloat(e.target.value) || 0 })}
|
|
className="w-full bg-slate-800 border border-slate-600 rounded-lg px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
min="0"
|
|
max="1000"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Owner */}
|
|
<div>
|
|
<label className="block text-xs font-medium text-slate-300 mb-1">
|
|
Owner
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.owner}
|
|
onChange={(e) => setFormData({ ...formData, owner: e.target.value })}
|
|
className="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-1.5 text-sm text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
placeholder="Your name"
|
|
/>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<div>
|
|
<label className="block text-xs font-medium text-slate-300 mb-1">
|
|
Description
|
|
</label>
|
|
<textarea
|
|
value={formData.description}
|
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
|
className="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-1.5 text-sm text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none"
|
|
rows={2}
|
|
placeholder="Additional details..."
|
|
/>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex gap-3 pt-4 border-t border-slate-700">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="flex-1 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white rounded-lg text-sm font-medium transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="flex-1 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-600/50 text-white rounded-lg text-sm font-medium transition-colors"
|
|
>
|
|
{loading ? 'Creating...' : 'Create'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ExperimentForm;
|