@wilshop/dashboard 3.5.2

package/src/app/routes/_authenticated/_orders/components/order-history/order-history-container.tsx

@@ -0,0 +1,80 @@
+import { Alert, AlertDescription } from '@/vdb/components/ui/alert.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Skeleton } from '@/vdb/components/ui/skeleton.js';
+import { Trans } from '@lingui/react/macro';
+import { TriangleAlert } from 'lucide-react';
+import { OrderHistory } from './order-history.js';
+import { useOrderHistory } from './use-order-history.js';
+
+interface OrderHistoryContainerProps {
+    orderId: string;
+}
+
+export function OrderHistoryContainer({ orderId }: Readonly<OrderHistoryContainerProps>) {
+    const {
+        historyEntries,
+        order,
+        loading,
+        error,
+        addNote,
+        updateNote,
+        deleteNote,
+        fetchNextPage,
+        hasNextPage,
+    } = useOrderHistory({ orderId, pageSize: 10 });
+
+    if (loading && !order) {
+        return (
+            <div className="space-y-4">
+                <h2 className="text-xl font-semibold">
+                    <Trans>Order history</Trans>
+                </h2>
+                <div className="space-y-2">
+                    <Skeleton className="h-20 w-full" />
+                    <Skeleton className="h-24 w-full" />
+                    <Skeleton className="h-24 w-full" />
+                </div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <Alert variant="destructive">
+                <TriangleAlert className="h-4 w-4" />
+                <AlertDescription>
+                    <Trans>Error loading order history: {error.message}</Trans>
+                </AlertDescription>
+            </Alert>
+        );
+    }
+
+    if (!order) {
+        return (
+            <Alert>
+                <AlertDescription>
+                    <Trans>Order not found</Trans>
+                </AlertDescription>
+            </Alert>
+        );
+    }
+
+    return (
+        <>
+            {order ? (
+                <OrderHistory
+                    order={order}
+                    historyEntries={historyEntries ?? []}
+                    onAddNote={addNote}
+                    onUpdateNote={updateNote}
+                    onDeleteNote={deleteNote}
+                />
+            ) : null}
+            {hasNextPage && (
+                <Button type="button" variant="outline" onClick={() => fetchNextPage()}>
+                    <Trans>Load more</Trans>
+                </Button>
+            )}
+        </>
+    );
+}

package/src/app/routes/_authenticated/_orders/components/order-history/order-history-types.ts

@@ -0,0 +1,5 @@
+import { ResultOf } from 'gql.tada';
+
+import { orderHistoryDocument } from '../../orders.graphql.js';
+
+export type OrderHistoryOrderDetail = NonNullable<ResultOf<typeof orderHistoryDocument>>['order'];

package/src/app/routes/_authenticated/_orders/components/order-history/order-history-utils.tsx

@@ -0,0 +1,173 @@
+import { HistoryEntryItem } from '@/vdb/framework/extension-api/types/index.js';
+import { Trans } from '@lingui/react/macro';
+import {
+    ArrowRightToLine,
+    Ban,
+    CheckIcon,
+    CreditCardIcon,
+    Edit3,
+    SquarePen,
+    Truck,
+    UserX,
+} from 'lucide-react';
+import { OrderHistoryOrderDetail } from './order-history-types.js';
+
+export function orderHistoryUtils(order: OrderHistoryOrderDetail) {
+    const getTimelineIcon = (entry: HistoryEntryItem) => {
+        switch (entry.type) {
+            case 'ORDER_PAYMENT_TRANSITION':
+                return <CreditCardIcon className="h-4 w-4" />;
+            case 'ORDER_REFUND_TRANSITION':
+                return <CreditCardIcon className="h-4 w-4" />;
+            case 'ORDER_NOTE':
+                return <SquarePen className="h-4 w-4" />;
+            case 'ORDER_STATE_TRANSITION':
+                if (entry.data.to === 'Delivered') {
+                    return <CheckIcon className="h-4 w-4" />;
+                }
+                if (entry.data.to === 'Cancelled') {
+                    return <Ban className="h-4 w-4" />;
+                }
+                return <ArrowRightToLine className="h-4 w-4" />;
+            case 'ORDER_FULFILLMENT_TRANSITION':
+                if (entry.data.to === 'Shipped' || entry.data.to === 'Delivered') {
+                    return <Truck className="h-4 w-4" />;
+                }
+                return <ArrowRightToLine className="h-4 w-4" />;
+            case 'ORDER_FULFILLMENT':
+                return <Truck className="h-4 w-4" />;
+            case 'ORDER_MODIFIED':
+                return <Edit3 className="h-4 w-4" />;
+            case 'ORDER_CUSTOMER_UPDATED':
+                return <UserX className="h-4 w-4" />;
+            case 'ORDER_CANCELLATION':
+                return <Ban className="h-4 w-4" />;
+            default:
+                return <CheckIcon className="h-4 w-4" />;
+        }
+    };
+
+    const getTitle = (entry: HistoryEntryItem) => {
+        switch (entry.type) {
+            case 'ORDER_PAYMENT_TRANSITION':
+                if (entry.data.to === 'Settled') {
+                    return <Trans>Payment settled</Trans>;
+                }
+                if (entry.data.to === 'Authorized') {
+                    return <Trans>Payment authorized</Trans>;
+                }
+                if (entry.data.to === 'Declined' || entry.data.to === 'Cancelled') {
+                    return <Trans>Payment failed</Trans>;
+                }
+                return <Trans>Payment transitioned</Trans>;
+            case 'ORDER_REFUND_TRANSITION':
+                if (entry.data.to === 'Settled') {
+                    return <Trans>Refund settled</Trans>;
+                }
+                return <Trans>Refund transitioned</Trans>;
+            case 'ORDER_NOTE':
+                return <Trans>Note added</Trans>;
+            case 'ORDER_STATE_TRANSITION': {
+                if (entry.data.from === 'Created') {
+                    return <Trans>Order placed</Trans>;
+                }
+                if (entry.data.to === 'Delivered') {
+                    return <Trans>Order fulfilled</Trans>;
+                }
+                if (entry.data.to === 'Cancelled') {
+                    return <Trans>Order cancelled</Trans>;
+                }
+                if (entry.data.to === 'Shipped') {
+                    return <Trans>Order shipped</Trans>;
+                }
+                return <Trans>Order transitioned</Trans>;
+            }
+            case 'ORDER_FULFILLMENT_TRANSITION':
+                if (entry.data.to === 'Shipped') {
+                    return <Trans>Order shipped</Trans>;
+                }
+                if (entry.data.to === 'Delivered') {
+                    return <Trans>Order delivered</Trans>;
+                }
+                return <Trans>Fulfillment transitioned</Trans>;
+            case 'ORDER_FULFILLMENT':
+                return <Trans>Fulfillment created</Trans>;
+            case 'ORDER_MODIFIED':
+                return <Trans>Order modified</Trans>;
+            case 'ORDER_CUSTOMER_UPDATED':
+                return <Trans>Customer updated</Trans>;
+            case 'ORDER_CANCELLATION':
+                return <Trans>Order cancelled</Trans>;
+            default:
+                return <Trans>{entry.type.replace(/_/g, ' ').toLowerCase()}</Trans>;
+        }
+    };
+
+    const getIconColor = ({ type, data }: HistoryEntryItem) => {
+        const success = 'bg-success text-success-foreground';
+        const destructive = 'bg-destructive text-destructive-foreground';
+        const regular = 'bg-muted text-muted-foreground';
+
+        if (type === 'ORDER_PAYMENT_TRANSITION' && data.to === 'Settled') {
+            return success;
+        }
+        if (type === 'ORDER_STATE_TRANSITION' && data.to === 'Delivered') {
+            return success;
+        }
+        if (type === 'ORDER_FULFILLMENT_TRANSITION' && data.to === 'Delivered') {
+            return success;
+        }
+        if (type === 'ORDER_CANCELLATION') {
+            return destructive;
+        }
+        if (type === 'ORDER_STATE_TRANSITION' && data.to === 'Cancelled') {
+            return destructive;
+        }
+        if (type === 'ORDER_PAYMENT_TRANSITION' && (data.to === 'Declined' || data.to === 'Cancelled')) {
+            return destructive;
+        }
+        return regular;
+    };
+
+    const getActorName = (entry: HistoryEntryItem) => {
+        if (entry.administrator) {
+            return `${entry.administrator.firstName} ${entry.administrator.lastName}`;
+        } else if (order?.customer) {
+            return `${order.customer.firstName} ${order.customer.lastName}`;
+        }
+        return '';
+    };
+
+    const isPrimaryEvent = (entry: HistoryEntryItem) => {
+        switch (entry.type) {
+            case 'ORDER_STATE_TRANSITION':
+                return (
+                    entry.data.to === 'Delivered' ||
+                    entry.data.to === 'Cancelled' ||
+                    entry.data.to === 'Settled' ||
+                    entry.data.from === 'Created'
+                );
+            case 'ORDER_REFUND_TRANSITION':
+                return entry.data.to === 'Settled';
+            case 'ORDER_PAYMENT_TRANSITION':
+                return entry.data.to === 'Settled' || entry.data.to === 'Cancelled';
+            case 'ORDER_FULFILLMENT_TRANSITION':
+                return entry.data.to === 'Delivered' || entry.data.to === 'Shipped';
+            case 'ORDER_NOTE':
+            case 'ORDER_MODIFIED':
+            case 'ORDER_CUSTOMER_UPDATED':
+            case 'ORDER_CANCELLATION':
+                return true;
+            default:
+                return false; // All other events are secondary
+        }
+    };
+
+    return {
+        getTimelineIcon,
+        getTitle,
+        getIconColor,
+        getActorName,
+        isPrimaryEvent,
+    };
+}

package/src/app/routes/_authenticated/_orders/components/order-history/order-history.tsx

@@ -0,0 +1,104 @@
+import { HistoryNoteEditor } from '@/vdb/components/shared/history-timeline/history-note-editor.js';
+import { HistoryNoteEntry } from '@/vdb/components/shared/history-timeline/history-note-entry.js';
+import { HistoryNoteInput } from '@/vdb/components/shared/history-timeline/history-note-input.js';
+import { HistoryTimelineWithGrouping } from '@/vdb/components/shared/history-timeline/history-timeline-with-grouping.js';
+import { useHistoryNoteEditor } from '@/vdb/components/shared/history-timeline/use-history-note-editor.js';
+import { HistoryEntryItem } from '@/vdb/framework/extension-api/types/index.js';
+import { HistoryEntryProps } from '@/vdb/framework/history-entry/history-entry.js';
+import {
+    OrderCancellationComponent,
+    OrderCustomerUpdatedComponent,
+    OrderFulfillmentComponent,
+    OrderFulfillmentTransitionComponent,
+    OrderModifiedComponent,
+    OrderPaymentTransitionComponent,
+    OrderRefundTransitionComponent,
+    OrderStateTransitionComponent,
+} from './default-order-history-components.js';
+import { OrderHistoryOrderDetail } from './order-history-types.js';
+import { orderHistoryUtils } from './order-history-utils.js';
+
+interface OrderHistoryProps {
+    order: OrderHistoryOrderDetail;
+    historyEntries: Array<HistoryEntryItem>;
+    onAddNote: (note: string, isPrivate: boolean) => void;
+    onUpdateNote?: (entryId: string, note: string, isPrivate: boolean) => void;
+    onDeleteNote?: (entryId: string) => void;
+}
+
+export function OrderHistory({
+    order,
+    historyEntries,
+    onAddNote,
+    onUpdateNote,
+    onDeleteNote,
+}: Readonly<OrderHistoryProps>) {
+    const { noteState, noteEditorOpen, handleEditNote, setNoteEditorOpen } = useHistoryNoteEditor();
+
+    const handleDeleteNote = (noteId: string) => {
+        onDeleteNote?.(noteId);
+    };
+
+    const handleNoteEditorSave = (noteId: string, note: string, isPrivate: boolean) => {
+        onUpdateNote?.(noteId, note, isPrivate);
+    };
+
+    const { getTimelineIcon, getTitle, getIconColor, getActorName, isPrimaryEvent } =
+        orderHistoryUtils(order);
+
+    const renderEntryContent = (entry: HistoryEntryItem) => {
+        const props: HistoryEntryProps = {
+            entry,
+            title: getTitle(entry),
+            actorName: getActorName(entry),
+            timelineIcon: getTimelineIcon(entry),
+            timelineIconClassName: getIconColor(entry),
+            isPrimary: isPrimaryEvent(entry),
+            children: null,
+        };
+        if (entry.type === 'ORDER_NOTE') {
+            return (
+                <HistoryNoteEntry {...props} onEditNote={handleEditNote} onDeleteNote={handleDeleteNote} />
+            );
+        } else if (entry.type === 'ORDER_STATE_TRANSITION') {
+            return <OrderStateTransitionComponent {...props} />;
+        } else if (entry.type === 'ORDER_PAYMENT_TRANSITION') {
+            return <OrderPaymentTransitionComponent {...props} />;
+        } else if (entry.type === 'ORDER_REFUND_TRANSITION') {
+            return <OrderRefundTransitionComponent {...props} />;
+        } else if (entry.type === 'ORDER_FULFILLMENT_TRANSITION') {
+            return <OrderFulfillmentTransitionComponent {...props} />;
+        } else if (entry.type === 'ORDER_FULFILLMENT') {
+            return <OrderFulfillmentComponent {...props} />;
+        } else if (entry.type === 'ORDER_MODIFIED') {
+            return <OrderModifiedComponent {...props} />;
+        } else if (entry.type === 'ORDER_CUSTOMER_UPDATED') {
+            return <OrderCustomerUpdatedComponent {...props} />;
+        } else if (entry.type === 'ORDER_CANCELLATION') {
+            return <OrderCancellationComponent {...props} />;
+        }
+        return null;
+    };
+
+    return (
+        <>
+            <HistoryTimelineWithGrouping
+                historyEntries={historyEntries}
+                isPrimaryEvent={isPrimaryEvent}
+                renderEntryContent={renderEntryContent}
+                entity={order}
+            >
+                <HistoryNoteInput onAddNote={onAddNote} />
+            </HistoryTimelineWithGrouping>
+            <HistoryNoteEditor
+                key={noteState.noteId}
+                note={noteState.note}
+                onNoteChange={handleNoteEditorSave}
+                open={noteEditorOpen}
+                onOpenChange={setNoteEditorOpen}
+                noteId={noteState.noteId}
+                isPrivate={noteState.isPrivate}
+            />
+        </>
+    );
+}

package/src/app/routes/_authenticated/_orders/components/order-history/use-order-history.ts

@@ -0,0 +1,175 @@
+import { api } from '@/vdb/graphql/api.js';
+import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
+import { useLingui } from '@lingui/react/macro';
+import { QueryKey, useInfiniteQuery, useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { orderHistoryDocument } from '../../orders.graphql.js';
+
+// Simplified mutation definitions - adjust based on your actual schema
+const addOrderNoteDocument = graphql(`
+    mutation AddOrderNote($orderId: ID!, $note: String!, $isPublic: Boolean!) {
+        addNoteToOrder(input: { id: $orderId, note: $note, isPublic: $isPublic }) {
+            id
+            history(options: { take: 1, sort: { createdAt: DESC } }) {
+                items {
+                    id
+                    createdAt
+                    type
+                    isPublic
+                    data
+                }
+            }
+        }
+    }
+`);
+
+const updateOrderNoteDocument = graphql(`
+    mutation UpdateOrderNote($noteId: ID!, $note: String!, $isPublic: Boolean!) {
+        updateOrderNote(input: { noteId: $noteId, note: $note, isPublic: $isPublic }) {
+            id
+        }
+    }
+`);
+
+const deleteOrderNoteDocument = graphql(`
+    mutation DeleteOrderNote($noteId: ID!) {
+        deleteOrderNote(id: $noteId) {
+            result
+            message
+        }
+    }
+`);
+
+export interface UseOrderHistoryResult {
+    historyEntries: NonNullable<ResultOf<typeof orderHistoryDocument>['order']>['history']['items'];
+    order: ResultOf<typeof orderHistoryDocument>['order'];
+    loading: boolean;
+    error: Error | null;
+    addNote: (note: string, isPrivate: boolean) => void;
+    updateNote: (noteId: string, note: string, isPrivate: boolean) => void;
+    deleteNote: (noteId: string) => void;
+    refetch: () => void;
+    fetchNextPage: () => void;
+    hasNextPage: boolean;
+}
+
+export function orderHistoryQueryKey(orderId: string): QueryKey {
+    return ['OrderHistory', orderId];
+}
+
+export function useOrderHistory({
+    orderId,
+    pageSize = 10,
+}: {
+    orderId: string;
+    pageSize?: number;
+}): UseOrderHistoryResult {
+    const [isLoading, setIsLoading] = useState(false);
+    const { i18n } = useLingui();
+
+    // Fetch order history
+    const {
+        data,
+        isLoading: isLoadingQuery,
+        error,
+        refetch,
+        fetchNextPage,
+        hasNextPage,
+    } = useInfiniteQuery({
+        queryFn: ({ pageParam = 0 }) =>
+            api.query(orderHistoryDocument, {
+                id: orderId,
+                options: {
+                    sort: { createdAt: 'DESC' },
+                    skip: pageParam * pageSize,
+                    take: pageSize,
+                },
+            }),
+        queryKey: orderHistoryQueryKey(orderId),
+        initialPageParam: 0,
+        getNextPageParam: (lastPage, _pages, lastPageParam) => {
+            const totalItems = lastPage.order?.history?.totalItems ?? 0;
+            const currentMaxItem = (lastPageParam + 1) * pageSize;
+            const nextPage = lastPageParam + 1;
+            return currentMaxItem < totalItems ? nextPage : undefined;
+        },
+    });
+
+    // Add note mutation
+    const { mutate: addNoteMutation } = useMutation({
+        mutationFn: api.mutate(addOrderNoteDocument),
+        onSuccess: () => {
+            toast.success(i18n.t('Note added successfully'));
+            void refetch();
+        },
+        onError: () => {
+            toast.error(i18n.t('Failed to add note'));
+        },
+    });
+
+    const addNote = (note: string, isPrivate: boolean) => {
+        setIsLoading(true);
+        addNoteMutation({
+            orderId,
+            note,
+            isPublic: !isPrivate, // isPrivate in UI is the opposite of isPublic in API
+        });
+    };
+
+    // Update note mutation
+    const { mutate: updateNoteMutation } = useMutation({
+        mutationFn: api.mutate(updateOrderNoteDocument),
+        onSuccess: () => {
+            toast.success(i18n.t('Note updated successfully'));
+            void refetch();
+        },
+        onError: () => {
+            toast.error(i18n.t('Failed to update note'));
+        },
+    });
+    const updateNote = (noteId: string, note: string, isPrivate: boolean) => {
+        setIsLoading(true);
+
+        updateNoteMutation({
+            noteId,
+            note,
+            isPublic: !isPrivate, // isPrivate in UI is the opposite of isPublic in API
+        });
+    };
+
+    // Delete note mutation
+    const { mutate: deleteNoteMutation } = useMutation({
+        mutationFn: api.mutate(deleteOrderNoteDocument),
+        onSuccess: () => {
+            toast.success(i18n.t('Note deleted successfully'));
+            void refetch();
+        },
+        onError: () => {
+            toast.error(i18n.t('Failed to delete note'));
+        },
+    });
+    const deleteNote = (noteId: string) => {
+        setIsLoading(true);
+        deleteNoteMutation({
+            noteId,
+        });
+    };
+
+    const historyEntries =
+        data?.pages.flatMap(page => page.order?.history?.items).filter(x => x != null) ?? [];
+
+    return {
+        historyEntries: historyEntries as any,
+        order: data?.pages[0]?.order ?? null,
+        loading: isLoadingQuery || isLoading,
+        error,
+        addNote,
+        updateNote,
+        deleteNote,
+        refetch,
+        fetchNextPage,
+        hasNextPage,
+    };
+}

package/src/app/routes/_authenticated/_orders/components/order-line-custom-fields-form.tsx

@@ -0,0 +1,53 @@
+import { CustomFieldsForm } from '@/vdb/components/shared/custom-fields-form.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Form } from '@/vdb/components/ui/form.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { Trans } from '@lingui/react/macro';
+import { Settings2 } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+
+interface OrderLineCustomFieldsFormProps {
+    onUpdate: (customFieldValues: Record<string, any>) => void;
+    value: Record<string, any>;
+}
+
+export function OrderLineCustomFieldsForm({ onUpdate, value }: Readonly<OrderLineCustomFieldsFormProps>) {
+    const form = useForm<Record<string, any>>({
+        defaultValues: {
+            customFields: value,
+        },
+    });
+
+    const onSubmit = (values: any) => {
+        onUpdate(values.customFields);
+    };
+
+    return (
+        <Popover>
+            <PopoverTrigger asChild>
+                <Button variant="ghost" size="icon">
+                    <Settings2 className="h-4 w-4" />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-80">
+                <Form {...form}>
+                    <form
+                        onSubmit={e => {
+                            e.stopPropagation();
+                            form.handleSubmit(onSubmit)(e);
+                        }}
+                        className="space-y-4"
+                    >
+                        <h4 className="font-medium leading-none">
+                            <Trans>Custom Fields</Trans>
+                        </h4>
+                        <CustomFieldsForm entityType="OrderLine" control={form.control} />
+                        <Button type="submit" className="w-full" disabled={!form.formState.isValid}>
+                            <Trans>Update</Trans>
+                        </Button>
+                    </form>
+                </Form>
+            </PopoverContent>
+        </Popover>
+    );
+}