Add shippedby to event feed
This commit is contained in:
@@ -1339,58 +1339,62 @@ export class EventsService {
|
||||
event.attributes?.metric_id;
|
||||
|
||||
// Extract properties from all possible locations
|
||||
const rawProps = {
|
||||
...(event.attributes?.event_properties || {}),
|
||||
...(event.attributes?.properties || {}),
|
||||
...(event.attributes?.profile || {}),
|
||||
value: event.attributes?.value,
|
||||
datetime: event.attributes?.datetime
|
||||
};
|
||||
const rawProps = event.attributes?.event_properties || {};
|
||||
|
||||
// Only log for shipped orders and only show relevant fields
|
||||
if (event.relationships?.metric?.data?.id === METRIC_IDS.SHIPPED_ORDER) {
|
||||
console.log('[EventsService] Shipped Order:', {
|
||||
orderId: rawProps.OrderId,
|
||||
shippedBy: rawProps.ShippedBy,
|
||||
datetime: event.attributes?.datetime
|
||||
});
|
||||
}
|
||||
|
||||
// Normalize shipping data
|
||||
const shippingData = {
|
||||
name: rawProps.ShippingName || rawProps.shipping_name || rawProps.shipping?.name,
|
||||
street1: rawProps.ShippingStreet1 || rawProps.shipping_street1 || rawProps.shipping?.street1,
|
||||
street2: rawProps.ShippingStreet2 || rawProps.shipping_street2 || rawProps.shipping?.street2,
|
||||
city: rawProps.ShippingCity || rawProps.shipping_city || rawProps.shipping?.city,
|
||||
state: rawProps.ShippingState || rawProps.shipping_state || rawProps.shipping?.state,
|
||||
zip: rawProps.ShippingZip || rawProps.shipping_zip || rawProps.shipping?.zip,
|
||||
country: rawProps.ShippingCountry || rawProps.shipping_country || rawProps.shipping?.country,
|
||||
method: rawProps.ShipMethod || rawProps.shipping_method || rawProps.shipping?.method,
|
||||
tracking: rawProps.TrackingNumber || rawProps.tracking_number
|
||||
ShippingName: rawProps.ShippingName,
|
||||
ShippingStreet1: rawProps.ShippingStreet1,
|
||||
ShippingStreet2: rawProps.ShippingStreet2,
|
||||
ShippingCity: rawProps.ShippingCity,
|
||||
ShippingState: rawProps.ShippingState,
|
||||
ShippingZip: rawProps.ShippingZip,
|
||||
ShippingCountry: rawProps.ShippingCountry,
|
||||
ShipMethod: rawProps.ShipMethod,
|
||||
TrackingNumber: rawProps.TrackingNumber,
|
||||
ShippedBy: rawProps.ShippedBy
|
||||
};
|
||||
|
||||
// Normalize payment data
|
||||
const paymentData = {
|
||||
method: rawProps.PaymentMethod || rawProps.payment_method || rawProps.payment?.method,
|
||||
name: rawProps.PaymentName || rawProps.payment_name || rawProps.payment?.name,
|
||||
amount: Number(rawProps.PaymentAmount || rawProps.payment_amount || rawProps.payment?.amount || 0)
|
||||
method: rawProps.PaymentMethod,
|
||||
name: rawProps.PaymentName,
|
||||
amount: Number(rawProps.PaymentAmount || 0)
|
||||
};
|
||||
|
||||
// Normalize order flags
|
||||
const orderFlags = {
|
||||
type: rawProps.OrderType || rawProps.order_type || 'standard',
|
||||
hasPreorder: Boolean(rawProps.HasPreorder || rawProps.has_preorder || rawProps.preorder),
|
||||
localPickup: Boolean(rawProps.LocalPickup || rawProps.local_pickup || rawProps.pickup),
|
||||
isOnHold: Boolean(rawProps.IsOnHold || rawProps.is_on_hold || rawProps.on_hold),
|
||||
hasDigiItem: Boolean(rawProps.HasDigiItem || rawProps.has_digital_item || rawProps.digital_item),
|
||||
hasNotions: Boolean(rawProps.HasNotions || rawProps.has_notions || rawProps.notions),
|
||||
hasDigitalGC: Boolean(rawProps.HasDigitalGC || rawProps.has_digital_gc || rawProps.gift_card),
|
||||
stillOwes: Boolean(rawProps.StillOwes || rawProps.still_owes || rawProps.balance_due)
|
||||
type: rawProps.OrderType || 'standard',
|
||||
hasPreorder: Boolean(rawProps.HasPreorder),
|
||||
localPickup: Boolean(rawProps.LocalPickup),
|
||||
isOnHold: Boolean(rawProps.IsOnHold),
|
||||
hasDigiItem: Boolean(rawProps.HasDigiItem),
|
||||
hasNotions: Boolean(rawProps.HasNotions),
|
||||
hasDigitalGC: Boolean(rawProps.HasDigitalGC),
|
||||
stillOwes: Boolean(rawProps.StillOwes)
|
||||
};
|
||||
|
||||
// Normalize refund/cancel data
|
||||
const refundData = {
|
||||
reason: rawProps.CancelReason || rawProps.cancel_reason || rawProps.reason,
|
||||
message: rawProps.CancelMessage || rawProps.cancel_message || rawProps.message,
|
||||
orderMessage: rawProps.OrderMessage || rawProps.order_message || rawProps.note
|
||||
reason: rawProps.CancelReason,
|
||||
message: rawProps.CancelMessage,
|
||||
orderMessage: rawProps.OrderMessage
|
||||
};
|
||||
|
||||
// Transform items
|
||||
const items = this._transformItems(rawProps.Items || rawProps.items || rawProps.line_items || []);
|
||||
const items = this._transformItems(rawProps.Items || []);
|
||||
|
||||
// Calculate totals
|
||||
const totalAmount = Number(rawProps.TotalAmount || rawProps.PaymentAmount || rawProps.total_amount || rawProps.value || 0);
|
||||
const totalAmount = Number(rawProps.TotalAmount || rawProps.PaymentAmount || rawProps.value || 0);
|
||||
const itemCount = items.reduce((sum, item) => sum + Number(item.Quantity || item.QuantityOrdered || 1), 0);
|
||||
|
||||
const transformed = {
|
||||
@@ -1408,29 +1412,10 @@ export class EventsService {
|
||||
},
|
||||
relationships: event.relationships,
|
||||
event_properties: {
|
||||
// Basic properties
|
||||
EmailAddress: rawProps.EmailAddress || rawProps.email,
|
||||
FirstName: rawProps.FirstName || rawProps.first_name,
|
||||
LastName: rawProps.LastName || rawProps.last_name,
|
||||
OrderId: rawProps.OrderId || rawProps.FromOrder || rawProps.order_id,
|
||||
...rawProps, // Include all original properties
|
||||
Items: items, // Override with transformed items
|
||||
TotalAmount: totalAmount,
|
||||
ItemCount: itemCount,
|
||||
Items: items,
|
||||
|
||||
// Shipping information
|
||||
...shippingData,
|
||||
|
||||
// Payment information
|
||||
...paymentData,
|
||||
|
||||
// Order flags
|
||||
...orderFlags,
|
||||
|
||||
// Refund/cancel information
|
||||
...refundData,
|
||||
|
||||
// Original properties (for backward compatibility)
|
||||
...rawProps
|
||||
ItemCount: itemCount
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -679,72 +679,26 @@ const EventDialog = ({ event, children }) => {
|
||||
|
||||
{event.metric_id === METRIC_IDS.SHIPPED_ORDER && (
|
||||
<>
|
||||
<div className="grid gap-6 sm:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium">Shipping Address</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-1">
|
||||
<p className="text-sm font-medium">{details.ShippingName}</p>
|
||||
{details.ShippingStreet1 && (
|
||||
<p className="text-sm text-muted-foreground">{details.ShippingStreet1}</p>
|
||||
)}
|
||||
{details.ShippingStreet2 && (
|
||||
<p className="text-sm text-muted-foreground">{details.ShippingStreet2}</p>
|
||||
)}
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{details.ShippingCity}, {details.ShippingState} {details.ShippingZip}
|
||||
</p>
|
||||
{details.ShippingCountry !== "US" && (
|
||||
<p className="text-sm text-muted-foreground">{details.ShippingCountry}</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium">Tracking Information</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-1">
|
||||
<p className="text-sm font-medium">{details.TrackingNumber}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{formatShipMethod(details.ShipMethod)}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="mt-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
{toTitleCase(details.ShippingName)}
|
||||
</span>
|
||||
<span className="text-sm text-gray-500">•</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
#{details.OrderId}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{formatShipMethodSimple(details.ShipMethod)}
|
||||
{event.event_properties?.ShippedBy && (
|
||||
<>
|
||||
<span className="text-sm text-gray-500"> • </span>
|
||||
<span className="text-sm font-medium text-blue-600 dark:text-blue-400">Shipped by {event.event_properties.ShippedBy}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="mt-6">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium">Shipped Items</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="divide-y">
|
||||
{details.Items?.map((item, i) => (
|
||||
<div key={i} className="flex gap-4 py-4 first:pt-0 last:pb-0">
|
||||
{item.ImgThumb && (
|
||||
<img
|
||||
src={item.ImgThumb}
|
||||
alt={item.ProductName}
|
||||
className="w-16 h-16 object-cover rounded bg-muted"
|
||||
/>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-sm">{item.ProductName}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Shipped: {item.QuantitySent} of {item.QuantityOrdered}
|
||||
</p>
|
||||
{item.QuantityBackordered > 0 && (
|
||||
<Badge variant="secondary" className="mt-2">
|
||||
{item.QuantityBackordered} Backordered
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -1038,15 +992,19 @@ const EventCard = ({ event }) => {
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
{toTitleCase(details.ShippingName)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||||
<span className="text-sm text-gray-500">•</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
#{details.OrderId}
|
||||
</span>
|
||||
<span className="text-sm text-gray-500">•</span>
|
||||
<span className="font-medium text-blue-600 dark:text-blue-400">
|
||||
{formatShipMethodSimple(details.ShipMethod)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{formatShipMethodSimple(details.ShipMethod)}
|
||||
{event.event_properties?.ShippedBy && (
|
||||
<>
|
||||
<span className="text-sm text-gray-500"> • </span>
|
||||
<span className="text-sm font-medium text-blue-600 dark:text-blue-400">Shipped by {event.event_properties.ShippedBy}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
@@ -1179,14 +1137,12 @@ const EventFeed = ({
|
||||
},
|
||||
});
|
||||
|
||||
// Ensure we have the datetime field in the response
|
||||
// Keep the original event structure intact
|
||||
const processedEvents = (response.data.data || []).map((event) => ({
|
||||
...event,
|
||||
datetime: event.attributes?.datetime || event.datetime,
|
||||
event_properties: {
|
||||
...event.event_properties,
|
||||
datetime: event.attributes?.datetime || event.datetime,
|
||||
},
|
||||
// Don't spread event_properties to preserve the nested structure
|
||||
event_properties: event.attributes?.event_properties || {}
|
||||
}));
|
||||
|
||||
setEvents(processedEvents);
|
||||
|
||||
@@ -250,6 +250,11 @@ const EventCard = ({ event }) => {
|
||||
#{details.OrderId} • {formatShipMethodSimple(details.ShipMethod)}
|
||||
</div>
|
||||
</div>
|
||||
{event.event_properties?.ShippedBy && (
|
||||
<div className={`text-sm font-medium ${eventType.textColor} opacity-90 truncate mt-1`}>
|
||||
Shipped by {event.event_properties.ShippedBy}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -369,10 +374,7 @@ const MiniEventFeed = ({
|
||||
const processedEvents = (response.data.data || []).map((event) => ({
|
||||
...event,
|
||||
datetime: event.attributes?.datetime || event.datetime,
|
||||
event_properties: {
|
||||
...event.event_properties,
|
||||
datetime: event.attributes?.datetime || event.datetime,
|
||||
},
|
||||
event_properties: event.attributes?.event_properties || {}
|
||||
}));
|
||||
|
||||
setEvents(processedEvents);
|
||||
|
||||
Reference in New Issue
Block a user