@wilshop/dashboard 3.5.2

package/src/app/routes/_authenticated/_orders/components/fulfillment-details.tsx

@@ -0,0 +1,159 @@
+import { LabeledData } from '@/vdb/components/labeled-data.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/vdb/components/ui/collapsible.js';
+import { api } from '@/vdb/graphql/api.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { useDynamicTranslations } from '@/vdb/hooks/use-dynamic-translations.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useMutation } from '@tanstack/react-query';
+import { ChevronDown } from 'lucide-react';
+import { toast } from 'sonner';
+import {
+    fulfillmentFragment,
+    orderDetailFragment,
+    transitionFulfillmentToStateDocument,
+} from '../orders.graphql.js';
+import { getTypeForState, StateTransitionControl } from './state-transition-control.js';
+
+type Order = NonNullable<ResultOf<typeof orderDetailFragment>>;
+
+type FulfillmentDetailsProps = {
+    order: Order;
+    fulfillment: ResultOf<typeof fulfillmentFragment>;
+    onSuccess?: () => void;
+};
+
+export function FulfillmentDetails({ order, fulfillment, onSuccess }: Readonly<FulfillmentDetailsProps>) {
+    const { formatDate } = useLocalFormat();
+    const { t } = useLingui();
+    const { getTranslatedFulfillmentState } = useDynamicTranslations();
+
+    // Create a map of order lines by ID for quick lookup
+    const orderLinesMap = new Map(order.lines.map(line => [line.id, line]));
+
+    const transitionFulfillmentMutation = useMutation({
+        mutationFn: api.mutate(transitionFulfillmentToStateDocument),
+        onSuccess: (result: ResultOf<typeof transitionFulfillmentToStateDocument>) => {
+            const fulfillment = result.transitionFulfillmentToState;
+            if (fulfillment.__typename === 'Fulfillment') {
+                toast.success(t`Fulfillment state updated successfully`);
+                onSuccess?.();
+            } else {
+                toast.error(fulfillment.message ?? t`Failed to update fulfillment state`);
+            }
+        },
+        onError: error => {
+            toast.error(t`Failed to update fulfillment state`);
+        },
+    });
+
+    const nextSuggestedState = (): string | undefined => {
+        const { nextStates } = fulfillment;
+        const namedStateOrDefault = (targetState: string) =>
+            nextStates.includes(targetState) ? targetState : nextStates[0];
+
+        switch (fulfillment.state) {
+            case 'Pending':
+                return namedStateOrDefault('Shipped');
+            case 'Shipped':
+                return namedStateOrDefault('Delivered');
+            default:
+                return nextStates.find(s => s !== 'Cancelled');
+        }
+    };
+
+    const nextOtherStates = (): string[] => {
+        const suggested = nextSuggestedState();
+        return fulfillment.nextStates.filter(s => s !== suggested);
+    };
+
+    const handleStateTransition = (state: string) => {
+        transitionFulfillmentMutation.mutate({
+            id: fulfillment.id,
+            state,
+        });
+    };
+
+    const getFulfillmentActions = () => {
+        const actions = [];
+
+        const suggested = nextSuggestedState();
+        if (suggested) {
+            const suggestedState = getTranslatedFulfillmentState(suggested);
+            actions.push({
+                label: t`Transition to ${suggestedState}`,
+                onClick: () => handleStateTransition(suggested),
+                disabled: transitionFulfillmentMutation.isPending,
+            });
+        }
+
+        nextOtherStates().forEach(state => {
+            actions.push({
+                label: t`Transition to ${getTranslatedFulfillmentState(state)}`,
+                type: getTypeForState(state),
+                onClick: () => handleStateTransition(state),
+                disabled: transitionFulfillmentMutation.isPending,
+            });
+        });
+
+        return actions;
+    };
+
+    return (
+        <div className="space-y-1 p-3 border rounded-md">
+            <div className="space-y-1">
+                <LabeledData label={<Trans>Fulfillment ID</Trans>} value={fulfillment.id.slice(-8)} />
+                <LabeledData label={<Trans>Method</Trans>} value={fulfillment.method} />
+                <LabeledData
+                    label={<Trans>State</Trans>}
+                    value={getTranslatedFulfillmentState(fulfillment.state)}
+                />
+                {fulfillment.trackingCode && (
+                    <LabeledData label={<Trans>Tracking code</Trans>} value={fulfillment.trackingCode} />
+                )}
+                <LabeledData label={<Trans>Created</Trans>} value={formatDate(fulfillment.createdAt)} />
+            </div>
+
+            {fulfillment.lines.length > 0 && (
+                <div className="mt-3 pt-3 border-t">
+                    <Collapsible>
+                        <CollapsibleTrigger className="flex items-center justify-between w-full text-sm hover:underline text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md p-1 -m-1">
+                            <Trans>
+                                Fulfilled items (
+                                {fulfillment.lines.reduce((acc, line) => acc + line.quantity, 0)})
+                            </Trans>
+                            <ChevronDown className="h-4 w-4 transition-transform duration-200 data-[state=open]:rotate-180" />
+                        </CollapsibleTrigger>
+                        <CollapsibleContent className="mt-2 space-y-1">
+                            {fulfillment.lines.map(line => {
+                                const orderLine = orderLinesMap.get(line.orderLineId);
+                                const productName = orderLine?.productVariant?.name ?? 'Unknown product';
+                                const sku = orderLine?.productVariant?.sku;
+
+                                return (
+                                    <div key={line.orderLineId} className="text-sm text-muted-foreground">
+                                        <div className="font-medium text-foreground text-xs">
+                                            {productName}
+                                        </div>
+                                        <div className="flex items-center gap-2 text-xs">
+                                            <span>Qty: {line.quantity}</span>
+                                            {sku && <span>SKU: {sku}</span>}
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </CollapsibleContent>
+                    </Collapsible>
+                </div>
+            )}
+
+            <div className="mt-3 pt-3 border-t">
+                <StateTransitionControl
+                    currentState={getTranslatedFulfillmentState(fulfillment.state)}
+                    actions={getFulfillmentActions()}
+                    isLoading={transitionFulfillmentMutation.isPending}
+                />
+            </div>
+        </div>
+    );
+}

package/src/app/routes/_authenticated/_orders/components/money-gross-net.tsx

@@ -0,0 +1,20 @@
+import { Money } from '@/vdb/components/data-display/money.js';
+
+export interface MoneyGrossNetProps {
+    priceWithTax: number;
+    price: number;
+    currencyCode: string;
+}
+
+export function MoneyGrossNet({ priceWithTax, price, currencyCode }: Readonly<MoneyGrossNetProps>) {
+    return (
+        <div className="flex flex-col gap-1">
+            <div>
+                <Money value={priceWithTax} currency={currencyCode} />
+            </div>
+            <div className="text-xs text-muted-foreground">
+                <Money value={price} currency={currencyCode} />
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,65 @@
+import { Trans } from '@lingui/react/macro';
+import { ResultOf } from 'gql.tada';
+import { Globe, Phone } from 'lucide-react';
+import { orderAddressFragment } from '../orders.graphql.js';
+
+type OrderAddress = Partial<Omit<ResultOf<typeof orderAddressFragment>, 'country'>> & {
+    country?: string | { code: string; name: string } | null;
+};
+
+export function OrderAddress({ address }: Readonly<{ address?: OrderAddress }>) {
+    const {
+        fullName,
+        company,
+        streetLine1,
+        streetLine2,
+        city,
+        province,
+        postalCode,
+        country,
+        countryCode,
+        phoneNumber,
+    } = address ?? {};
+
+    const countryName = typeof country === 'string' ? country : country?.name;
+    const countryCodeString = country && typeof country !== 'string' ? country?.code : countryCode;
+
+    if (!address || Object.values(address).every(value => !value)) {
+        return (
+            <div className="text-sm text-muted-foreground">
+                <Trans>No address</Trans>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-1 text-sm">
+            {fullName && <p className="font-medium">{fullName}</p>}
+            {company && <p className="text-sm text-muted-foreground">{company}</p>}
+
+            <div>
+                {streetLine1 && <p>{streetLine1}</p>}
+                {streetLine2 && <p>{streetLine2}</p>}
+                <p>{[city, province].filter(Boolean).join(', ')}</p>
+                {postalCode && <p>{postalCode}</p>}
+                {country && (
+                    <div className="flex items-center gap-1.5">
+                        <Globe className="h-3 w-3 text-muted-foreground" />
+                        <span>{countryName}</span>
+                        {countryCodeString && (
+                            <span className="text-xs text-muted-foreground">({countryCodeString})</span>
+                        )}
+                    </div>
+                )}
+                {phoneNumber && (
+                    <>
+                        <div className="flex items-center gap-1.5">
+                            <Phone className="h-3 w-3 text-muted-foreground" />
+                            <span className="text-sm">{phoneNumber}</span>
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,307 @@
+import { CustomFieldsForm } from '@/vdb/components/shared/custom-fields-form.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { DropdownMenuItem } from '@/vdb/components/ui/dropdown-menu.js';
+import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
+import {
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { getDetailQueryOptions, useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { api } from '@/vdb/graphql/api.js';
+import { useCustomFieldConfig } from '@/vdb/hooks/use-custom-field-config.js';
+import { useDynamicTranslations } from '@/vdb/hooks/use-dynamic-translations.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Link, useNavigate } from '@tanstack/react-router';
+import { ResultOf } from 'gql.tada';
+import { Pencil, User } from 'lucide-react';
+import { useMemo } from 'react';
+import { toast } from 'sonner';
+import {
+    orderDetailDocument,
+    setOrderCustomFieldsDocument,
+    transitionOrderToStateDocument,
+} from '../orders.graphql.js';
+import { canAddFulfillment, shouldShowAddManualPaymentButton } from '../utils/order-utils.js';
+import { AddManualPaymentDialog } from './add-manual-payment-dialog.js';
+import { FulfillOrderDialog } from './fulfill-order-dialog.js';
+import { FulfillmentDetails } from './fulfillment-details.js';
+import { OrderAddress } from './order-address.js';
+import { OrderHistoryContainer } from './order-history/order-history-container.js';
+import { orderHistoryQueryKey } from './order-history/use-order-history.js';
+import { OrderTable } from './order-table.js';
+import { OrderTaxSummary } from './order-tax-summary.js';
+import { PaymentDetails } from './payment-details.js';
+import { getTypeForState, StateTransitionControl } from './state-transition-control.js';
+import { useTransitionOrderToState } from './use-transition-order-to-state.js';
+
+export type OrderDetail = NonNullable<ResultOf<typeof orderDetailDocument>['order']>;
+
+export interface OrderDetailSharedProps {
+    // Required props
+    pageId: string;
+    orderId: string;
+    // Title customization
+    titleSlot?: (order: OrderDetail) => React.ReactNode;
+    // Optional content slots
+    beforeOrderTable?: (order: OrderDetail) => React.ReactNode;
+}
+
+function DefaultOrderTitle({ entity }: { entity: any }) {
+    return <>{entity?.code ?? ''}</>;
+}
+
+/**
+ * @description
+ * Shared functionality between the order and seller order detail pages.
+ */
+export function OrderDetailShared({
+    pageId,
+    orderId,
+    titleSlot,
+    beforeOrderTable,
+}: Readonly<OrderDetailSharedProps>) {
+    const { t } = useLingui();
+    const navigate = useNavigate();
+    const queryClient = useQueryClient();
+    const { getTranslatedOrderState } = useDynamicTranslations();
+
+    const { form, submitHandler, entity, refreshEntity } = useDetailPage({
+        pageId,
+        queryDocument: addCustomFields(orderDetailDocument, {
+            includeNestedFragments: ['OrderLine'],
+        }),
+        updateDocument: setOrderCustomFieldsDocument,
+        setValuesForUpdate: (entity: any) => {
+            return {
+                id: entity.id,
+                customFields: entity.customFields,
+            };
+        },
+        params: { id: orderId },
+        onSuccess: async () => {
+            toast(t`Successfully updated order`);
+            form.reset(form.getValues());
+        },
+        onError: err => {
+            toast(t`Failed to update order`, {
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    const { transitionToState } = useTransitionOrderToState(entity?.id);
+    const transitionOrderToStateMutation = useMutation({
+        mutationFn: api.mutate(transitionOrderToStateDocument),
+    });
+
+    const customFieldConfig = useCustomFieldConfig('Order');
+
+    const stateTransitionActions = useMemo(() => {
+        if (!entity) {
+            return [];
+        }
+        return entity.nextStates.map((state: string) => ({
+            label: t`Transition to ${getTranslatedOrderState(state)}`,
+            type: getTypeForState(state),
+            onClick: async () => {
+                const transitionError = await transitionToState(state);
+                if (transitionError) {
+                    toast(t`Failed to transition order to state`, {
+                        description: transitionError,
+                    });
+                } else {
+                    refreshOrderAndHistory();
+                }
+            },
+        }));
+    }, [entity, transitionToState, t]);
+
+    if (!entity) {
+        return null;
+    }
+
+    const handleModifyClick = async () => {
+        try {
+            await transitionOrderToStateMutation.mutateAsync({
+                id: entity.id,
+                state: 'Modifying',
+            });
+            const queryKey = getDetailQueryOptions(orderDetailDocument, { id: entity.id }).queryKey;
+            await queryClient.invalidateQueries({ queryKey });
+            await navigate({ to: `/orders/$id/modify`, params: { id: entity.id } });
+        } catch (error) {
+            toast(t`Failed to modify order`, {
+                description: error instanceof Error ? error.message : 'Unknown error',
+            });
+        }
+    };
+
+    const nextStates = entity.nextStates;
+    const showAddPaymentButton = shouldShowAddManualPaymentButton(entity);
+    const showFulfillButton = canAddFulfillment(entity);
+
+    async function refreshOrderAndHistory() {
+        if (entity) {
+            const queryKey = getDetailQueryOptions(orderDetailDocument, { id: entity.id }).queryKey;
+            await queryClient.invalidateQueries({ queryKey });
+            queryClient.refetchQueries({ queryKey: orderHistoryQueryKey(entity.id) });
+        }
+    }
+
+    return (
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+            <PageTitle>{titleSlot?.(entity) || <DefaultOrderTitle entity={entity} />}</PageTitle>
+            <PageActionBar>
+                <PageActionBarRight
+                    dropdownMenuItems={[
+                        ...(nextStates.includes('Modifying')
+                            ? [
+                                  {
+                                      component: () => (
+                                          <DropdownMenuItem onClick={handleModifyClick}>
+                                              <Pencil className="w-4 h-4" />
+                                              <Trans>Modify</Trans>
+                                          </DropdownMenuItem>
+                                      ),
+                                  },
+                              ]
+                            : []),
+                    ]}
+                >
+                    {showAddPaymentButton && (
+                        <PermissionGuard requires={['UpdateOrder']}>
+                            <AddManualPaymentDialog
+                                order={entity}
+                                onSuccess={() => {
+                                    refreshEntity();
+                                }}
+                            />
+                        </PermissionGuard>
+                    )}
+                    {showFulfillButton && (
+                        <PermissionGuard requires={['UpdateOrder']}>
+                            <FulfillOrderDialog
+                                order={entity}
+                                onSuccess={() => {
+                                    refreshOrderAndHistory();
+                                }}
+                            />
+                        </PermissionGuard>
+                    )}
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                {/* Main Column Blocks */}
+                {beforeOrderTable?.(entity)}
+                <PageBlock column="main" blockId="order-table">
+                    <OrderTable order={entity} pageId={pageId} />
+                </PageBlock>
+                <PageBlock column="main" blockId="tax-summary" title={<Trans>Tax summary</Trans>}>
+                    <OrderTaxSummary order={entity} />
+                </PageBlock>
+                {customFieldConfig?.length ? (
+                    <PageBlock column="main" blockId="custom-fields">
+                        <CustomFieldsForm entityType="Order" control={form.control} />
+                        <div className="flex justify-end">
+                            <Button
+                                type="submit"
+                                disabled={!form.formState.isDirty || !form.formState.isValid}
+                            >
+                                <Trans>Save</Trans>
+                            </Button>
+                        </div>
+                    </PageBlock>
+                ) : null}
+                <PageBlock column="main" blockId="payment-details" title={<Trans>Payment details</Trans>}>
+                    <div className="grid lg:grid-cols-2 gap-4">
+                        {entity?.payments?.map((payment: any) => (
+                            <PaymentDetails
+                                key={payment.id}
+                                payment={payment}
+                                currencyCode={entity.currencyCode}
+                                onSuccess={refreshOrderAndHistory}
+                            />
+                        ))}
+                    </div>
+                </PageBlock>
+                <PageBlock column="main" blockId="order-history" title={<Trans>Order history</Trans>}>
+                    <OrderHistoryContainer orderId={orderId} />
+                </PageBlock>
+
+                {/* Side Column Blocks */}
+                <PageBlock column="side" blockId="state">
+                    <StateTransitionControl
+                        currentState={entity?.state}
+                        actions={stateTransitionActions}
+                        isLoading={transitionOrderToStateMutation.isPending}
+                    />
+                </PageBlock>
+                <PageBlock column="side" blockId="customer" title={<Trans>Customer</Trans>}>
+                    {entity?.customer ? (
+                        <Button variant="outline" asChild>
+                            <Link to={`/customers/${entity.customer.id}`}>
+                                <User className="w-4 h-4" />
+                                {entity.customer.firstName} {entity.customer.lastName}
+                            </Link>
+                        </Button>
+                    ) : (
+                        <div className="text-muted-foreground text-xs font-medium p-3 border rounded-md">
+                            <Trans>No customer</Trans>
+                        </div>
+                    )}
+                    <div className="mt-4 divide-y">
+                        {entity?.shippingAddress && (
+                            <div className="pb-6">
+                                <div className="font-medium mb-6">
+                                    <Trans>Shipping address</Trans>
+                                </div>
+                                <OrderAddress address={entity.shippingAddress} />
+                            </div>
+                        )}
+                        {entity?.billingAddress && (
+                            <div className="pt-4">
+                                <div className="font-medium mb-6">
+                                    <Trans>Billing address</Trans>
+                                </div>
+                                <OrderAddress address={entity.billingAddress} />
+                            </div>
+                        )}
+                    </div>
+                </PageBlock>
+                <PageBlock
+                    column="side"
+                    blockId="fulfillment-details"
+                    title={<Trans>Fulfillment details</Trans>}
+                >
+                    {entity?.fulfillments?.length && entity.fulfillments.length > 0 ? (
+                        <div className="space-y-2">
+                            {entity?.fulfillments?.map((fulfillment: any) => (
+                                <FulfillmentDetails
+                                    key={fulfillment.id}
+                                    order={entity}
+                                    fulfillment={fulfillment}
+                                    onSuccess={() => {
+                                        refreshEntity();
+                                        queryClient.refetchQueries({
+                                            queryKey: orderHistoryQueryKey(entity.id),
+                                        });
+                                    }}
+                                />
+                            ))}
+                        </div>
+                    ) : (
+                        <div className="text-muted-foreground text-sm">
+                            <Trans>No fulfillments</Trans>
+                        </div>
+                    )}
+                </PageBlock>
+            </PageLayout>
+        </Page>
+    );
+}

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

@@ -0,0 +1,98 @@
+import { HistoryEntry, HistoryEntryProps } from '@/vdb/framework/history-entry/history-entry.js';
+import { Trans } from '@lingui/react/macro';
+
+export function OrderStateTransitionComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    if (entry.data.from === 'Created') return null;
+
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>
+                    From {entry.data.from} to {entry.data.to}
+                </Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function OrderPaymentTransitionComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>
+                    Payment #{entry.data.paymentId} transitioned to {entry.data.to}
+                </Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function OrderRefundTransitionComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>
+                    Refund #{entry.data.refundId} transitioned to {entry.data.to}
+                </Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function OrderFulfillmentTransitionComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>
+                    Fulfillment #{entry.data.fulfillmentId} from {entry.data.from} to {entry.data.to}
+                </Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function OrderFulfillmentComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>Fulfillment #{entry.data.fulfillmentId} created</Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function OrderModifiedComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>Order modification #{entry.data.modificationId}</Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function OrderCustomerUpdatedComponent(props: Readonly<HistoryEntryProps>) {
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>Customer information updated</Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function OrderCancellationComponent(props: Readonly<HistoryEntryProps>) {
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>Order cancelled</Trans>
+            </p>
+        </HistoryEntry>
+    );
+}

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

@@ -0,0 +1,3 @@
+export * from './order-history.js';
+export * from './order-history-container.js';
+export * from './use-order-history.js';