ebd767363d
- Add useTranslation hook to all three wizard step components - Translate CustomerSelectionStep: customer search, selection, and new customer form - Translate OrderItemsStep: product selection, order items management - Translate DeliveryPaymentStep: delivery, payment, and all advanced options sections - Update wizard step titles to use translation keys - Support for English, Spanish, and Basque languages
1423 lines
70 KiB
TypeScript
1423 lines
70 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { WizardStep, WizardStepProps } from '../../../ui/WizardModal/WizardModal';
|
|
import { AdvancedOptionsSection } from '../../../ui/AdvancedOptionsSection';
|
|
import Tooltip from '../../../ui/Tooltip/Tooltip';
|
|
import {
|
|
Users,
|
|
Plus,
|
|
Package,
|
|
Truck,
|
|
CreditCard,
|
|
Search,
|
|
Calendar,
|
|
MapPin,
|
|
Info,
|
|
Loader2,
|
|
CheckCircle2,
|
|
} from 'lucide-react';
|
|
import { useTenant } from '../../../../stores/tenant.store';
|
|
import OrdersService from '../../../../api/services/orders';
|
|
import { inventoryService } from '../../../../api/services/inventory';
|
|
import { ProductType } from '../../../../api/types/inventory';
|
|
|
|
interface WizardDataProps extends WizardStepProps {
|
|
data: Record<string, any>;
|
|
onDataChange: (data: Record<string, any>) => void;
|
|
}
|
|
|
|
// Step 1: Customer Selection
|
|
const CustomerSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange }) => {
|
|
const { t } = useTranslation('wizards');
|
|
const { currentTenant } = useTenant();
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [showNewCustomerForm, setShowNewCustomerForm] = useState(false);
|
|
const [selectedCustomer, setSelectedCustomer] = useState(data.customer || null);
|
|
const [customers, setCustomers] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const [newCustomer, setNewCustomer] = useState({
|
|
name: data.newCustomerName || '',
|
|
type: data.newCustomerType || 'retail',
|
|
phone: data.newCustomerPhone || '',
|
|
email: data.newCustomerEmail || '',
|
|
});
|
|
|
|
useEffect(() => {
|
|
fetchCustomers();
|
|
}, []);
|
|
|
|
// Update parent whenever customer selection changes
|
|
const handleCustomerChange = (newCustomer: any, newShowForm: boolean) => {
|
|
setSelectedCustomer(newCustomer);
|
|
setShowNewCustomerForm(newShowForm);
|
|
onDataChange({
|
|
...data,
|
|
customer: newCustomer,
|
|
showNewCustomerForm: newShowForm,
|
|
});
|
|
};
|
|
|
|
// Update new customer data
|
|
const handleNewCustomerChange = (updates: any) => {
|
|
const updated = { ...newCustomer, ...updates };
|
|
setNewCustomer(updated);
|
|
onDataChange({
|
|
...data,
|
|
showNewCustomerForm,
|
|
newCustomerName: updated.name,
|
|
newCustomerType: updated.type,
|
|
newCustomerPhone: updated.phone,
|
|
newCustomerEmail: updated.email,
|
|
});
|
|
};
|
|
|
|
const fetchCustomers = async () => {
|
|
if (!currentTenant?.id) return;
|
|
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const result = await OrdersService.getCustomers({
|
|
tenant_id: currentTenant.id,
|
|
active_only: true,
|
|
});
|
|
setCustomers(result);
|
|
} catch (err: any) {
|
|
console.error('Error loading customers:', err);
|
|
setError(t('customerOrder.messages.errorLoadingCustomers'));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const filteredCustomers = customers.filter((customer) =>
|
|
customer.name.toLowerCase().includes(searchQuery.toLowerCase())
|
|
);
|
|
|
|
const handleSelectCustomer = (customer: any) => {
|
|
handleCustomerChange(customer, false);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
|
|
<Users className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
|
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
|
{t('customerOrder.customerSelection.title')}
|
|
</h3>
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
|
{t('customerOrder.customerSelection.subtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<Loader2 className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
|
|
<span className="ml-3 text-[var(--text-secondary)]">{t('customerOrder.messages.loadingCustomers')}</span>
|
|
</div>
|
|
) : !showNewCustomerForm ? (
|
|
<>
|
|
{/* Search Bar */}
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-[var(--text-tertiary)]" />
|
|
<input
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
placeholder={t('customerOrder.customerSelection.searchPlaceholder')}
|
|
className="w-full pl-10 pr-4 py-3 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
|
|
{/* Customer List */}
|
|
<div className="space-y-3 max-h-96 overflow-y-auto pr-2">
|
|
{filteredCustomers.length === 0 ? (
|
|
<div className="text-center py-8 border-2 border-dashed border-[var(--border-secondary)] rounded-lg">
|
|
<Users className="w-12 h-12 mx-auto mb-3 text-[var(--text-tertiary)]" />
|
|
<p className="text-[var(--text-secondary)] mb-1">{t('customerOrder.messages.noCustomersFound')}</p>
|
|
<p className="text-sm text-[var(--text-tertiary)]">{t('customerOrder.messages.tryDifferentSearch')}</p>
|
|
</div>
|
|
) : (
|
|
filteredCustomers.map((customer) => (
|
|
<button
|
|
key={customer.id}
|
|
onClick={() => handleSelectCustomer(customer)}
|
|
className={`w-full p-4 rounded-xl border-2 transition-all text-left group hover:shadow-md ${
|
|
selectedCustomer?.id === customer.id
|
|
? 'border-[var(--color-primary)] bg-gradient-to-r from-[var(--color-primary)]/10 to-[var(--color-primary)]/5 shadow-sm'
|
|
: 'border-[var(--border-secondary)] hover:border-[var(--color-primary)]/50 hover:bg-[var(--bg-secondary)]/30'
|
|
}`}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<div className={`w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0 transition-colors ${
|
|
selectedCustomer?.id === customer.id
|
|
? 'bg-[var(--color-primary)] text-white'
|
|
: 'bg-[var(--bg-tertiary)] text-[var(--text-tertiary)] group-hover:bg-[var(--color-primary)]/20 group-hover:text-[var(--color-primary)]'
|
|
}`}>
|
|
<Users className="w-6 h-6" />
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<h4 className={`font-semibold truncate transition-colors ${
|
|
selectedCustomer?.id === customer.id
|
|
? 'text-[var(--color-primary)]'
|
|
: 'text-[var(--text-primary)]'
|
|
}`}>
|
|
{customer.name}
|
|
</h4>
|
|
{selectedCustomer?.id === customer.id && (
|
|
<CheckCircle2 className="w-5 h-5 text-[var(--color-primary)] flex-shrink-0" />
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-2 text-sm text-[var(--text-secondary)]">
|
|
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
|
|
customer.customer_type === 'wholesale'
|
|
? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300'
|
|
: customer.customer_type === 'restaurant'
|
|
? 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300'
|
|
: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
|
|
}`}>
|
|
{t(`customerOrder.customerTypes.${customer.customer_type}`)}
|
|
</span>
|
|
{customer.phone && <span>📱 {customer.phone}</span>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
))
|
|
)}
|
|
</div>
|
|
|
|
{/* Create New Customer Button */}
|
|
<button
|
|
onClick={() => handleCustomerChange(null, true)}
|
|
className="w-full p-4 border-2 border-dashed border-[var(--border-secondary)] rounded-lg hover:border-[var(--color-primary)] transition-colors text-[var(--text-secondary)] hover:text-[var(--color-primary)] flex items-center justify-center gap-2"
|
|
>
|
|
<Plus className="w-5 h-5" />
|
|
<span className="font-medium">{t('customerOrder.customerSelection.createNew')}</span>
|
|
</button>
|
|
</>
|
|
) : (
|
|
<>
|
|
{/* New Customer Form */}
|
|
<div className="p-4 bg-[var(--bg-secondary)]/30 rounded-lg border border-[var(--border-secondary)]">
|
|
<h4 className="font-semibold text-[var(--text-primary)] mb-4 flex items-center gap-2">
|
|
<Plus className="w-5 h-5" />
|
|
{t('customerOrder.messages.newCustomerHeader')}
|
|
</h4>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="md:col-span-2">
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.customerSelection.customerName')} *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={newCustomer.name}
|
|
onChange={(e) => handleNewCustomerChange({ name: e.target.value })}
|
|
placeholder={t('customerOrder.customerSelection.customerNamePlaceholder')}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.customerSelection.customerType')} *
|
|
</label>
|
|
<select
|
|
value={newCustomer.type}
|
|
onChange={(e) => handleNewCustomerChange({ type: e.target.value })}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
>
|
|
<option value="retail">{t('customerOrder.customerTypes.retail')}</option>
|
|
<option value="wholesale">{t('customerOrder.customerTypes.wholesale')}</option>
|
|
<option value="event">{t('customerOrder.customerTypes.event')}</option>
|
|
<option value="restaurant">{t('customerOrder.customerTypes.restaurant')}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.customerSelection.phone')} *
|
|
</label>
|
|
<input
|
|
type="tel"
|
|
value={newCustomer.phone}
|
|
onChange={(e) => handleNewCustomerChange({ phone: e.target.value })}
|
|
placeholder={t('customerOrder.customerSelection.phonePlaceholder')}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
|
|
<div className="md:col-span-2">
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.customerSelection.email')} ({t('common.optional')})
|
|
</label>
|
|
<input
|
|
type="email"
|
|
value={newCustomer.email}
|
|
onChange={(e) => handleNewCustomerChange({ email: e.target.value })}
|
|
placeholder={t('customerOrder.customerSelection.emailPlaceholder')}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => handleCustomerChange(selectedCustomer, false)}
|
|
className="mt-4 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
|
|
>
|
|
← {t('customerOrder.customerSelection.backToList')}
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Step 2: Order Items
|
|
const OrderItemsStep: React.FC<WizardDataProps> = ({ data, onDataChange }) => {
|
|
const { t } = useTranslation('wizards');
|
|
const { currentTenant } = useTenant();
|
|
const [orderItems, setOrderItems] = useState(data.orderItems || []);
|
|
const [products, setProducts] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
fetchProducts();
|
|
}, []);
|
|
|
|
// Update parent whenever order items change
|
|
const updateOrderItems = (newItems: any[]) => {
|
|
setOrderItems(newItems);
|
|
const totalAmount = newItems.reduce((sum: number, item: any) => sum + (item.subtotal || 0), 0);
|
|
onDataChange({ ...data, orderItems: newItems, totalAmount });
|
|
};
|
|
|
|
const fetchProducts = async () => {
|
|
if (!currentTenant?.id) return;
|
|
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const allIngredients = await inventoryService.getIngredients(currentTenant.id);
|
|
const finishedProducts = allIngredients.filter(
|
|
(ingredient) => ingredient.product_type === ProductType.FINISHED_PRODUCT
|
|
);
|
|
setProducts(finishedProducts);
|
|
} catch (err: any) {
|
|
console.error('Error loading products:', err);
|
|
setError(t('customerOrder.messages.errorLoadingProducts'));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleAddItem = () => {
|
|
updateOrderItems([
|
|
...orderItems,
|
|
{
|
|
id: Date.now(),
|
|
productId: '',
|
|
productName: '',
|
|
quantity: 1,
|
|
unitPrice: 0,
|
|
customRequirements: '',
|
|
subtotal: 0,
|
|
unitOfMeasure: 'units',
|
|
},
|
|
]);
|
|
};
|
|
|
|
const handleUpdateItem = (index: number, field: string, value: any) => {
|
|
const updated = orderItems.map((item: any, i: number) => {
|
|
if (i === index) {
|
|
const newItem = { ...item, [field]: value };
|
|
|
|
if (field === 'productId') {
|
|
const product = products.find((p) => p.id === value);
|
|
if (product) {
|
|
newItem.productName = product.name;
|
|
newItem.unitPrice = product.average_cost || product.last_purchase_price || 0;
|
|
newItem.unitOfMeasure = product.unit_of_measure;
|
|
}
|
|
}
|
|
|
|
if (field === 'quantity' || field === 'unitPrice' || field === 'productId') {
|
|
newItem.subtotal = (newItem.quantity || 0) * (newItem.unitPrice || 0);
|
|
}
|
|
return newItem;
|
|
}
|
|
return item;
|
|
});
|
|
updateOrderItems(updated);
|
|
};
|
|
|
|
const handleRemoveItem = (index: number) => {
|
|
updateOrderItems(orderItems.filter((_: any, i: number) => i !== index));
|
|
};
|
|
|
|
const calculateTotal = () => {
|
|
return orderItems.reduce((sum: number, item: any) => sum + (item.subtotal || 0), 0);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
|
|
<Package className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
|
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
|
{t('customerOrder.orderItems.title')}
|
|
</h3>
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
|
{t('customerOrder.orderItems.customer')}: <span className="font-semibold">{data.customer?.name || t('customerOrder.messages.newCustomer')}</span>
|
|
</p>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<Loader2 className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
|
|
<span className="ml-3 text-[var(--text-secondary)]">{t('customerOrder.messages.loadingProducts')}</span>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)]">
|
|
{t('customerOrder.orderItems.orderProducts')}
|
|
</label>
|
|
<button
|
|
onClick={handleAddItem}
|
|
className="px-3 py-1.5 text-sm bg-[var(--color-primary)] text-white rounded-md hover:bg-[var(--color-primary)]/90 transition-colors flex items-center gap-1"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
{t('customerOrder.messages.addProduct')}
|
|
</button>
|
|
</div>
|
|
|
|
{orderItems.length === 0 ? (
|
|
<div className="text-center py-12 border-2 border-dashed border-[var(--border-secondary)] rounded-lg text-[var(--text-tertiary)]">
|
|
<Package className="w-12 h-12 mx-auto mb-3 opacity-50" />
|
|
<p className="mb-2">{t('customerOrder.messages.noProductsInOrder')}</p>
|
|
<p className="text-sm">{t('customerOrder.messages.clickAddProduct')}</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{orderItems.map((item: any, index: number) => (
|
|
<div
|
|
key={item.id}
|
|
className="p-4 border border-[var(--border-secondary)] rounded-lg bg-[var(--bg-secondary)]/30 space-y-3"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-semibold text-[var(--text-primary)]">
|
|
{t('customerOrder.orderItems.productNumber', { number: index + 1 })}
|
|
</span>
|
|
<button
|
|
onClick={() => handleRemoveItem(index)}
|
|
className="p-1 text-red-500 hover:text-red-700 transition-colors"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
<div className="md:col-span-2">
|
|
<label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">
|
|
{t('customerOrder.orderItems.product')} *
|
|
</label>
|
|
<select
|
|
value={item.productId}
|
|
onChange={(e) => handleUpdateItem(index, 'productId', e.target.value)}
|
|
className="w-full px-3 py-2 text-sm border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
>
|
|
<option value="">{t('customerOrder.orderItems.selectProduct')}</option>
|
|
{products.map((product) => (
|
|
<option key={product.id} value={product.id}>
|
|
{product.name} - €{(product.average_cost || product.last_purchase_price || 0).toFixed(2)} / {product.unit_of_measure}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">
|
|
{t('customerOrder.orderItems.quantity')} *
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={item.quantity}
|
|
onChange={(e) => handleUpdateItem(index, 'quantity', parseFloat(e.target.value) || 0)}
|
|
className="w-full px-3 py-2 text-sm border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
min="0"
|
|
step="1"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">
|
|
{t('customerOrder.orderItems.unitPrice')}
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={item.unitPrice}
|
|
onChange={(e) => handleUpdateItem(index, 'unitPrice', parseFloat(e.target.value) || 0)}
|
|
className="w-full px-3 py-2 text-sm border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
min="0"
|
|
step="0.01"
|
|
/>
|
|
</div>
|
|
|
|
<div className="md:col-span-2">
|
|
<label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">
|
|
{t('customerOrder.orderItems.specialRequirements')} ({t('common.optional')})
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={item.customRequirements}
|
|
onChange={(e) => handleUpdateItem(index, 'customRequirements', e.target.value)}
|
|
placeholder={t('customerOrder.orderItems.specialRequirementsPlaceholder')}
|
|
className="w-full px-3 py-2 text-sm border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-2 border-t border-[var(--border-primary)] text-sm">
|
|
<span className="font-semibold text-[var(--text-primary)]">
|
|
{t('customerOrder.orderItems.subtotal')}: €{item.subtotal.toFixed(2)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{orderItems.length > 0 && (
|
|
<div className="p-4 bg-gradient-to-r from-[var(--color-primary)]/5 to-[var(--color-primary)]/10 rounded-lg border-2 border-[var(--color-primary)]/20">
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-lg font-semibold text-[var(--text-primary)]">{t('customerOrder.messages.orderTotal')}:</span>
|
|
<span className="text-2xl font-bold text-[var(--color-primary)]">
|
|
€{calculateTotal().toFixed(2)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Step 3: Delivery & Payment with ALL fields
|
|
const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange }) => {
|
|
const { t } = useTranslation('wizards');
|
|
const [orderData, setOrderData] = useState({
|
|
// Required fields
|
|
requestedDeliveryDate: data.requestedDeliveryDate || '',
|
|
orderNumber: data.orderNumber || '',
|
|
|
|
// Basic order info
|
|
orderType: data.orderType || 'standard',
|
|
priority: data.priority || 'normal',
|
|
status: data.status || 'pending',
|
|
|
|
// Delivery fields
|
|
deliveryMethod: data.deliveryMethod || 'pickup',
|
|
deliveryAddress: data.deliveryAddress || '',
|
|
deliveryInstructions: data.deliveryInstructions || '',
|
|
deliveryContactName: data.deliveryContactName || '',
|
|
deliveryContactPhone: data.deliveryContactPhone || '',
|
|
deliveryTimeWindow: data.deliveryTimeWindow || '',
|
|
deliveryFee: data.deliveryFee || '',
|
|
|
|
// Payment fields
|
|
paymentMethod: data.paymentMethod || 'invoice',
|
|
paymentTerms: data.paymentTerms || 'net_30',
|
|
paymentStatus: data.paymentStatus || 'pending',
|
|
paymentDueDate: data.paymentDueDate || '',
|
|
|
|
// Pricing fields
|
|
subtotalAmount: data.subtotalAmount || '',
|
|
taxAmount: data.taxAmount || '',
|
|
discountPercentage: data.discountPercentage || '',
|
|
discountAmount: data.discountAmount || '',
|
|
shippingCost: data.shippingCost || '',
|
|
|
|
// Production & scheduling
|
|
productionStartDate: data.productionStartDate || '',
|
|
productionDueDate: data.productionDueDate || '',
|
|
productionBatchNumber: data.productionBatchNumber || '',
|
|
productionNotes: data.productionNotes || '',
|
|
|
|
// Fulfillment
|
|
actualDeliveryDate: data.actualDeliveryDate || '',
|
|
pickupLocation: data.pickupLocation || '',
|
|
shippingTrackingNumber: data.shippingTrackingNumber || '',
|
|
shippingCarrier: data.shippingCarrier || '',
|
|
|
|
// Source & channel
|
|
orderSource: data.orderSource || 'manual',
|
|
salesChannel: data.salesChannel || 'direct',
|
|
salesRepId: data.salesRepId || '',
|
|
|
|
// Communication
|
|
customerPurchaseOrder: data.customerPurchaseOrder || '',
|
|
internalNotes: data.internalNotes || '',
|
|
customerNotes: data.customerNotes || '',
|
|
specialInstructions: data.specialInstructions || '',
|
|
|
|
// Notifications
|
|
notifyCustomerOnStatusChange: data.notifyCustomerOnStatusChange ?? true,
|
|
notifyCustomerOnDelivery: data.notifyCustomerOnDelivery ?? true,
|
|
customerNotificationEmail: data.customerNotificationEmail || '',
|
|
customerNotificationPhone: data.customerNotificationPhone || '',
|
|
|
|
// Quality & requirements
|
|
qualityCheckRequired: data.qualityCheckRequired ?? false,
|
|
qualityCheckStatus: data.qualityCheckStatus || '',
|
|
packagingInstructions: data.packagingInstructions || '',
|
|
labelingRequirements: data.labelingRequirements || '',
|
|
|
|
// Advanced options
|
|
isRecurring: data.isRecurring ?? false,
|
|
recurringSchedule: data.recurringSchedule || '',
|
|
parentOrderId: data.parentOrderId || '',
|
|
relatedOrderIds: data.relatedOrderIds || '',
|
|
tags: data.tags || '',
|
|
metadata: data.metadata || '',
|
|
});
|
|
|
|
// Update parent whenever order data changes
|
|
const handleOrderDataChange = (newOrderData: any) => {
|
|
setOrderData(newOrderData);
|
|
onDataChange({ ...data, ...newOrderData });
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
|
|
<Truck className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
|
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.title')}
|
|
</h3>
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
|
{t('customerOrder.deliveryPayment.subtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Required Fields */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
<Calendar className="w-4 h-4 inline mr-1.5" />
|
|
{t('customerOrder.deliveryPayment.requestedDeliveryDate')} *
|
|
</label>
|
|
<input
|
|
type="date"
|
|
value={orderData.requestedDeliveryDate}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, requestedDeliveryDate: e.target.value })}
|
|
min={new Date().toISOString().split('T')[0]}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.orderNumberLabel')}
|
|
<Tooltip content={t('customerOrder.deliveryPayment.orderNumberTooltip')}>
|
|
<Info className="inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" />
|
|
</Tooltip>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={orderData.orderNumber || t('customerOrder.deliveryPayment.autoGeneratedLabel')}
|
|
readOnly
|
|
disabled
|
|
placeholder={t('customerOrder.deliveryPayment.autoGeneratedPlaceholder')}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg bg-[var(--bg-secondary)] text-[var(--text-tertiary)] cursor-not-allowed"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Basic Order Info */}
|
|
<div className="border-t border-[var(--border-primary)] pt-4">
|
|
<h4 className="text-sm font-semibold text-[var(--text-primary)] mb-3">{t('customerOrder.sections.basicInfo')}</h4>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.orderType')}
|
|
</label>
|
|
<select
|
|
value={orderData.orderType}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, orderType: e.target.value })}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
>
|
|
<option value="standard">{t('customerOrder.orderTypes.standard')}</option>
|
|
<option value="custom">{t('customerOrder.orderTypes.custom')}</option>
|
|
<option value="bulk">{t('customerOrder.orderTypes.bulk')}</option>
|
|
<option value="urgent">{t('customerOrder.orderTypes.urgent')}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.priority')}
|
|
</label>
|
|
<select
|
|
value={orderData.priority}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, priority: e.target.value })}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
>
|
|
<option value="low">{t('customerOrder.priorities.low')}</option>
|
|
<option value="normal">{t('customerOrder.priorities.normal')}</option>
|
|
<option value="high">{t('customerOrder.priorities.high')}</option>
|
|
<option value="urgent">{t('customerOrder.priorities.urgent')}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.status')}
|
|
</label>
|
|
<select
|
|
value={orderData.status}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, status: e.target.value })}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
>
|
|
<option value="pending">{t('customerOrder.statuses.pending')}</option>
|
|
<option value="confirmed">{t('customerOrder.statuses.confirmed')}</option>
|
|
<option value="in_production">{t('customerOrder.statuses.in_production')}</option>
|
|
<option value="ready">{t('customerOrder.statuses.ready')}</option>
|
|
<option value="delivered">{t('customerOrder.statuses.delivered')}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Delivery Details */}
|
|
<div className="border-t border-[var(--border-primary)] pt-4">
|
|
<h4 className="text-sm font-semibold text-[var(--text-primary)] mb-3">{t('customerOrder.sections.deliveryInfo')}</h4>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
<Truck className="w-4 h-4 inline mr-1.5" />
|
|
{t('customerOrder.deliveryPayment.deliveryMethod')}
|
|
</label>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => handleOrderDataChange({ ...orderData, deliveryMethod: 'pickup' })}
|
|
className={`p-3 rounded-lg border-2 transition-all ${
|
|
orderData.deliveryMethod === 'pickup'
|
|
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5'
|
|
: 'border-[var(--border-secondary)]'
|
|
}`}
|
|
>
|
|
<p className="font-semibold text-sm">{t('customerOrder.deliveryMethods.pickup')}</p>
|
|
<p className="text-xs text-[var(--text-tertiary)]">{t('customerOrder.deliveryMethods.pickupDesc')}</p>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleOrderDataChange({ ...orderData, deliveryMethod: 'delivery' })}
|
|
className={`p-3 rounded-lg border-2 transition-all ${
|
|
orderData.deliveryMethod === 'delivery'
|
|
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5'
|
|
: 'border-[var(--border-secondary)]'
|
|
}`}
|
|
>
|
|
<p className="font-semibold text-sm">{t('customerOrder.deliveryMethods.delivery')}</p>
|
|
<p className="text-xs text-[var(--text-tertiary)]">{t('customerOrder.deliveryMethods.deliveryDesc')}</p>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleOrderDataChange({ ...orderData, deliveryMethod: 'shipping' })}
|
|
className={`p-3 rounded-lg border-2 transition-all ${
|
|
orderData.deliveryMethod === 'shipping'
|
|
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5'
|
|
: 'border-[var(--border-secondary)]'
|
|
}`}
|
|
>
|
|
<p className="font-semibold text-sm">{t('customerOrder.deliveryMethods.shipping')}</p>
|
|
<p className="text-xs text-[var(--text-tertiary)]">{t('customerOrder.deliveryMethods.shippingDesc')}</p>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{(orderData.deliveryMethod === 'delivery' || orderData.deliveryMethod === 'shipping') && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
<MapPin className="w-4 h-4 inline mr-1.5" />
|
|
{t('customerOrder.messages.deliveryAddress')} *
|
|
</label>
|
|
<textarea
|
|
value={orderData.deliveryAddress}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, deliveryAddress: e.target.value })}
|
|
placeholder={t('customerOrder.deliveryPayment.deliveryAddressPlaceholder')}
|
|
rows={2}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.deliveryContactName')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={orderData.deliveryContactName}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, deliveryContactName: e.target.value })}
|
|
placeholder={t('customerOrder.deliveryPayment.deliveryContactNamePlaceholder')}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.deliveryContactPhone')}
|
|
</label>
|
|
<input
|
|
type="tel"
|
|
value={orderData.deliveryContactPhone}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, deliveryContactPhone: e.target.value })}
|
|
placeholder={t('customerOrder.deliveryPayment.phoneNumberPlaceholder')}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Payment Details */}
|
|
<div className="border-t border-[var(--border-primary)] pt-4">
|
|
<h4 className="text-sm font-semibold text-[var(--text-primary)] mb-3">{t('customerOrder.sections.paymentInfo')}</h4>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
<CreditCard className="w-4 h-4 inline mr-1.5" />
|
|
{t('customerOrder.messages.paymentMethod')}
|
|
</label>
|
|
<select
|
|
value={orderData.paymentMethod}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, paymentMethod: e.target.value })}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
>
|
|
<option value="cash">{t('customerOrder.paymentMethods.cash')}</option>
|
|
<option value="card">{t('customerOrder.paymentMethods.card')}</option>
|
|
<option value="bank_transfer">{t('customerOrder.paymentMethods.bank_transfer')}</option>
|
|
<option value="invoice">{t('customerOrder.paymentMethods.invoice')}</option>
|
|
<option value="account">{t('customerOrder.paymentMethods.account')}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.paymentTerms')}
|
|
</label>
|
|
<select
|
|
value={orderData.paymentTerms}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, paymentTerms: e.target.value })}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
>
|
|
<option value="immediate">{t('customerOrder.paymentTerms.immediate')}</option>
|
|
<option value="net_30">{t('customerOrder.paymentTerms.net_30')}</option>
|
|
<option value="net_60">{t('customerOrder.paymentTerms.net_60')}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.paymentStatus')}
|
|
</label>
|
|
<select
|
|
value={orderData.paymentStatus}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, paymentStatus: e.target.value })}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
>
|
|
<option value="pending">{t('customerOrder.paymentStatuses.pending')}</option>
|
|
<option value="partial">{t('customerOrder.paymentStatuses.partial')}</option>
|
|
<option value="paid">{t('customerOrder.paymentStatuses.paid')}</option>
|
|
<option value="overdue">{t('customerOrder.paymentStatuses.overdue')}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.paymentDueDate')}
|
|
</label>
|
|
<input
|
|
type="date"
|
|
value={orderData.paymentDueDate}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, paymentDueDate: e.target.value })}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Order Summary */}
|
|
<div className="p-4 bg-[var(--bg-secondary)]/50 rounded-lg border border-[var(--border-secondary)]">
|
|
<h4 className="font-semibold text-[var(--text-primary)] mb-3">{t('customerOrder.sections.orderSummary')}</h4>
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-[var(--text-secondary)]">{t('customerOrder.orderItems.customer')}:</span>
|
|
<span className="font-medium">{data.customer?.name || t('customerOrder.messages.newCustomer')}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-[var(--text-secondary)]">{t('customerOrder.deliveryPayment.products')}:</span>
|
|
<span className="font-medium">{data.orderItems?.length || 0} {t('customerOrder.messages.items')}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-[var(--text-secondary)]">{t('customerOrder.messages.total')}:</span>
|
|
<span className="font-semibold text-lg text-[var(--color-primary)]">
|
|
€{data.totalAmount?.toFixed(2) || '0.00'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Advanced Options */}
|
|
<AdvancedOptionsSection
|
|
title={t('customerOrder.sections.advancedOptions')}
|
|
description={t('customerOrder.sections.advancedOptionsDescription')}
|
|
>
|
|
{/* Pricing Details */}
|
|
<div className="space-y-4">
|
|
<h5 className="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider">
|
|
{t('customerOrder.sections.pricingDetails')}
|
|
</h5>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.discount')}
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={orderData.discountPercentage}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, discountPercentage: e.target.value })}
|
|
placeholder="0"
|
|
step="0.01"
|
|
min="0"
|
|
max="100"
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.deliveryFee')}
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={orderData.deliveryFee}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, deliveryFee: e.target.value })}
|
|
placeholder="0.00"
|
|
step="0.01"
|
|
min="0"
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Production & Scheduling */}
|
|
<div className="space-y-4 border-t border-[var(--border-primary)] pt-4">
|
|
<h5 className="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider">
|
|
{t('customerOrder.sections.productionScheduling')}
|
|
</h5>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.productionStartDate')}
|
|
</label>
|
|
<input
|
|
type="date"
|
|
value={orderData.productionStartDate}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, productionStartDate: e.target.value })}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.productionDueDate')}
|
|
</label>
|
|
<input
|
|
type="date"
|
|
value={orderData.productionDueDate}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, productionDueDate: e.target.value })}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.productionBatchNumber')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={orderData.productionBatchNumber}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, productionBatchNumber: e.target.value })}
|
|
placeholder={t('customerOrder.messages.productionBatchNumberPlaceholder')}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.deliveryTimeWindow')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={orderData.deliveryTimeWindow}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, deliveryTimeWindow: e.target.value })}
|
|
placeholder={t('customerOrder.deliveryPayment.deliveryTimeWindowPlaceholder')}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
|
|
<div className="md:col-span-2">
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.productionNotes')}
|
|
</label>
|
|
<textarea
|
|
value={orderData.productionNotes}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, productionNotes: e.target.value })}
|
|
placeholder={t('customerOrder.deliveryPayment.productionNotesPlaceholder')}
|
|
rows={2}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Fulfillment & Tracking */}
|
|
<div className="space-y-4 border-t border-[var(--border-primary)] pt-4">
|
|
<h5 className="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider">
|
|
{t('customerOrder.sections.fulfillmentTracking')}
|
|
</h5>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.shippingTrackingNumber')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={orderData.shippingTrackingNumber}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, shippingTrackingNumber: e.target.value })}
|
|
placeholder={t('customerOrder.deliveryPayment.shippingTrackingNumberPlaceholder')}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.shippingCarrier')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={orderData.shippingCarrier}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, shippingCarrier: e.target.value })}
|
|
placeholder={t('customerOrder.deliveryPayment.shippingCarrierPlaceholder')}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.pickupLocation')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={orderData.pickupLocation}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, pickupLocation: e.target.value })}
|
|
placeholder={t('customerOrder.deliveryPayment.pickupLocationPlaceholder')}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.actualDeliveryDate')}
|
|
</label>
|
|
<input
|
|
type="date"
|
|
value={orderData.actualDeliveryDate}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, actualDeliveryDate: e.target.value })}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Source & Channel */}
|
|
<div className="space-y-4 border-t border-[var(--border-primary)] pt-4">
|
|
<h5 className="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider">
|
|
{t('customerOrder.sections.sourceChannel')}
|
|
</h5>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.orderSource')}
|
|
</label>
|
|
<select
|
|
value={orderData.orderSource}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, orderSource: e.target.value })}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
>
|
|
<option value="manual">{t('customerOrder.orderSources.manual')}</option>
|
|
<option value="phone">{t('customerOrder.orderSources.phone')}</option>
|
|
<option value="email">{t('customerOrder.orderSources.email')}</option>
|
|
<option value="website">{t('customerOrder.orderSources.website')}</option>
|
|
<option value="app">{t('customerOrder.orderSources.app')}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.salesChannel')}
|
|
</label>
|
|
<select
|
|
value={orderData.salesChannel}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, salesChannel: e.target.value })}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
>
|
|
<option value="direct">{t('customerOrder.salesChannels.direct')}</option>
|
|
<option value="wholesale">{t('customerOrder.salesChannels.wholesale')}</option>
|
|
<option value="retail">{t('customerOrder.salesChannels.retail')}</option>
|
|
<option value="online">{t('customerOrder.salesChannels.online')}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="md:col-span-2">
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.salesRepId')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={orderData.salesRepId}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, salesRepId: e.target.value })}
|
|
placeholder={t('customerOrder.deliveryPayment.salesRepIdPlaceholder')}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Communication & Notes */}
|
|
<div className="space-y-4 border-t border-[var(--border-primary)] pt-4">
|
|
<h5 className="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider">
|
|
{t('customerOrder.sections.communicationNotes')}
|
|
</h5>
|
|
<div className="grid grid-cols-1 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.customerPurchaseOrder')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={orderData.customerPurchaseOrder}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, customerPurchaseOrder: e.target.value })}
|
|
placeholder={t('customerOrder.deliveryPayment.customerPurchaseOrderPlaceholder')}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.deliveryInstructions')}
|
|
</label>
|
|
<textarea
|
|
value={orderData.deliveryInstructions}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, deliveryInstructions: e.target.value })}
|
|
placeholder={t('customerOrder.deliveryPayment.deliveryInstructionsPlaceholder')}
|
|
rows={2}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.specialInstructions')}
|
|
</label>
|
|
<textarea
|
|
value={orderData.specialInstructions}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, specialInstructions: e.target.value })}
|
|
placeholder={t('customerOrder.deliveryPayment.specialInstructionsPlaceholder')}
|
|
rows={2}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.internalNotes')}
|
|
</label>
|
|
<textarea
|
|
value={orderData.internalNotes}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, internalNotes: e.target.value })}
|
|
placeholder={t('customerOrder.deliveryPayment.internalNotesPlaceholder')}
|
|
rows={2}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.customerNotes')}
|
|
</label>
|
|
<textarea
|
|
value={orderData.customerNotes}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, customerNotes: e.target.value })}
|
|
placeholder={t('customerOrder.deliveryPayment.customerNotesPlaceholder')}
|
|
rows={2}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Notifications */}
|
|
<div className="space-y-4 border-t border-[var(--border-primary)] pt-4">
|
|
<h5 className="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider">
|
|
{t('customerOrder.sections.notifications')}
|
|
</h5>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
checked={orderData.notifyCustomerOnStatusChange}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, notifyCustomerOnStatusChange: e.target.checked })}
|
|
className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
|
|
/>
|
|
<label className="text-sm text-[var(--text-secondary)]">
|
|
{t('customerOrder.deliveryPayment.notifyOnStatusChange')}
|
|
</label>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
checked={orderData.notifyCustomerOnDelivery}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, notifyCustomerOnDelivery: e.target.checked })}
|
|
className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
|
|
/>
|
|
<label className="text-sm text-[var(--text-secondary)]">
|
|
{t('customerOrder.deliveryPayment.notifyOnDelivery')}
|
|
</label>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.notificationEmail')}
|
|
</label>
|
|
<input
|
|
type="email"
|
|
value={orderData.customerNotificationEmail}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, customerNotificationEmail: e.target.value })}
|
|
placeholder={t('customerOrder.deliveryPayment.notificationEmailPlaceholder')}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.notificationPhone')}
|
|
</label>
|
|
<input
|
|
type="tel"
|
|
value={orderData.customerNotificationPhone}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, customerNotificationPhone: e.target.value })}
|
|
placeholder={t('customerOrder.deliveryPayment.phoneNumberPlaceholder')}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quality & Requirements */}
|
|
<div className="space-y-4 border-t border-[var(--border-primary)] pt-4">
|
|
<h5 className="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider">
|
|
{t('customerOrder.sections.qualityRequirements')}
|
|
</h5>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
checked={orderData.qualityCheckRequired}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, qualityCheckRequired: e.target.checked })}
|
|
className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
|
|
/>
|
|
<label className="text-sm text-[var(--text-secondary)]">
|
|
{t('customerOrder.deliveryPayment.qualityCheckRequired')}
|
|
</label>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.qualityCheckStatus')}
|
|
</label>
|
|
<select
|
|
value={orderData.qualityCheckStatus}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, qualityCheckStatus: e.target.value })}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
>
|
|
<option value="">{t('customerOrder.qualityCheckStatuses.not_started')}</option>
|
|
<option value="pending">{t('customerOrder.qualityCheckStatuses.pending')}</option>
|
|
<option value="passed">{t('customerOrder.qualityCheckStatuses.passed')}</option>
|
|
<option value="failed">{t('customerOrder.qualityCheckStatuses.failed')}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.packagingInstructions')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={orderData.packagingInstructions}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, packagingInstructions: e.target.value })}
|
|
placeholder={t('customerOrder.deliveryPayment.packagingInstructionsPlaceholder')}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.labelingRequirements')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={orderData.labelingRequirements}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, labelingRequirements: e.target.value })}
|
|
placeholder={t('customerOrder.deliveryPayment.labelingRequirementsPlaceholder')}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Additional Options */}
|
|
<div className="space-y-4 border-t border-[var(--border-primary)] pt-4">
|
|
<h5 className="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider">
|
|
{t('customerOrder.sections.additionalOptions')}
|
|
</h5>
|
|
<div className="grid grid-cols-1 gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
checked={orderData.isRecurring}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, isRecurring: e.target.checked })}
|
|
className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
|
|
/>
|
|
<label className="text-sm text-[var(--text-secondary)]">
|
|
{t('customerOrder.deliveryPayment.recurringOrder')}
|
|
</label>
|
|
</div>
|
|
|
|
{orderData.isRecurring && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.recurringSchedule')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={orderData.recurringSchedule}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, recurringSchedule: e.target.value })}
|
|
placeholder={t('customerOrder.deliveryPayment.recurringSchedulePlaceholder')}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.tags')}
|
|
<Tooltip content={t('customerOrder.deliveryPayment.tagsTooltip')}>
|
|
<Info className="inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" />
|
|
</Tooltip>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={orderData.tags}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, tags: e.target.value })}
|
|
placeholder={t('customerOrder.deliveryPayment.tagsPlaceholder')}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
{t('customerOrder.deliveryPayment.metadata')}
|
|
<Tooltip content={t('customerOrder.deliveryPayment.metadataTooltip')}>
|
|
<Info className="inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" />
|
|
</Tooltip>
|
|
</label>
|
|
<textarea
|
|
value={orderData.metadata}
|
|
onChange={(e) => handleOrderDataChange({ ...orderData, metadata: e.target.value })}
|
|
placeholder={t('customerOrder.deliveryPayment.metadataPlaceholder')}
|
|
rows={2}
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)] font-mono text-xs"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AdvancedOptionsSection>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const CustomerOrderWizardSteps = (
|
|
data: Record<string, any>,
|
|
setData: (data: Record<string, any>) => void
|
|
): WizardStep[] => [
|
|
{
|
|
id: 'customer-selection',
|
|
title: 'customerOrder.customerSelection.title',
|
|
component: (props) => <CustomerSelectionStep {...props} data={data} onDataChange={setData} />,
|
|
validate: () => {
|
|
return !!(data.customer || (data.showNewCustomerForm && data.newCustomerName && data.newCustomerPhone));
|
|
},
|
|
},
|
|
{
|
|
id: 'order-items',
|
|
title: 'customerOrder.orderItems.title',
|
|
component: (props) => <OrderItemsStep {...props} data={data} onDataChange={setData} />,
|
|
validate: () => {
|
|
return !!(data.orderItems && data.orderItems.length > 0);
|
|
},
|
|
},
|
|
{
|
|
id: 'delivery-payment',
|
|
title: 'customerOrder.deliveryPayment.title',
|
|
component: (props) => <DeliveryPaymentStep {...props} data={data} onDataChange={setData} />,
|
|
validate: () => {
|
|
return !!(
|
|
data.requestedDeliveryDate &&
|
|
(data.deliveryMethod === 'pickup' || data.deliveryAddress)
|
|
);
|
|
},
|
|
},
|
|
];
|