@vendure/dashboard 3.2.0

package/src/app/routes/_authenticated/_orders/orders.graphql.ts

@@ -0,0 +1,325 @@
+import { assetFragment } from '@/graphql/fragments.js';
+import { graphql } from '@/graphql/graphql.js';
+import { gql } from 'awesome-graphql-client';
+
+export const orderListDocument = graphql(`
+    query GetOrders($options: OrderListOptions) {
+        orders(options: $options) {
+            items {
+                id
+                createdAt
+                updatedAt
+                type
+                code
+                state
+                customer {
+                    id
+                    firstName
+                    lastName
+                }
+                orderPlacedAt
+                total
+                totalWithTax
+                currencyCode
+
+                shippingLines {
+                    shippingMethod {
+                        name
+                    }
+                }
+            }
+            totalItems
+        }
+    }
+`);
+
+export const discountFragment = graphql(`
+    fragment Discount on Discount {
+        adjustmentSource
+        amount
+        amountWithTax
+        description
+        type
+    }
+`);
+
+export const paymentFragment = graphql(`
+    fragment Payment on Payment {
+        id
+        createdAt
+        transactionId
+        amount
+        method
+        state
+        metadata
+    }
+`);
+
+export const refundFragment = graphql(`
+    fragment Refund on Refund {
+        id
+        state
+        items
+        shipping
+        adjustment
+        transactionId
+        paymentId
+    }
+`);
+
+export const orderAddressFragment = graphql(`
+    fragment OrderAddress on OrderAddress {
+        fullName
+        company
+        streetLine1
+        streetLine2
+        city
+        province
+        postalCode
+        country
+        countryCode
+        phoneNumber
+    }
+`);
+
+export const fulfillmentFragment = graphql(`
+    fragment Fulfillment on Fulfillment {
+        id
+        state
+        nextStates
+        createdAt
+        updatedAt
+        method
+        lines {
+            orderLineId
+            quantity
+        }
+        trackingCode
+    }
+`);
+
+export const paymentWithRefundsFragment = graphql(`
+    fragment PaymentWithRefunds on Payment {
+        id
+        createdAt
+        transactionId
+        amount
+        method
+        state
+        nextStates
+        errorMessage
+        metadata
+        refunds {
+            id
+            createdAt
+            state
+            items
+            adjustment
+            total
+            paymentId
+            reason
+            transactionId
+            method
+            metadata
+            lines {
+                orderLineId
+                quantity
+            }
+        }
+    }
+`);
+
+export const orderLineFragment = graphql(
+    `
+        fragment OrderLine on OrderLine {
+            id
+            createdAt
+            updatedAt
+            featuredAsset {
+                ...Asset
+            }
+            productVariant {
+                id
+                name
+                sku
+                trackInventory
+                stockOnHand
+            }
+            discounts {
+                ...Discount
+            }
+            fulfillmentLines {
+                fulfillmentId
+                quantity
+            }
+            unitPrice
+            unitPriceWithTax
+            proratedUnitPrice
+            proratedUnitPriceWithTax
+            quantity
+            orderPlacedQuantity
+            linePrice
+            lineTax
+            linePriceWithTax
+            discountedLinePrice
+            discountedLinePriceWithTax
+        }
+    `,
+    [assetFragment],
+);
+
+export const orderDetailFragment = graphql(
+    `
+        fragment OrderDetail on Order {
+            id
+            createdAt
+            updatedAt
+            type
+            aggregateOrder {
+                id
+                code
+            }
+            sellerOrders {
+                id
+                code
+                channels {
+                    id
+                    code
+                }
+            }
+            code
+            state
+            nextStates
+            active
+            couponCodes
+            customer {
+                id
+                firstName
+                lastName
+            }
+            lines {
+                ...OrderLine
+            }
+            surcharges {
+                id
+                sku
+                description
+                price
+                priceWithTax
+                taxRate
+            }
+            discounts {
+                ...Discount
+            }
+            promotions {
+                id
+                couponCode
+            }
+            subTotal
+            subTotalWithTax
+            total
+            totalWithTax
+            currencyCode
+            shipping
+            shippingWithTax
+            shippingLines {
+                id
+                discountedPriceWithTax
+                shippingMethod {
+                    id
+                    code
+                    name
+                    fulfillmentHandlerCode
+                    description
+                }
+            }
+            taxSummary {
+                description
+                taxBase
+                taxRate
+                taxTotal
+            }
+            shippingAddress {
+                ...OrderAddress
+            }
+            billingAddress {
+                ...OrderAddress
+            }
+            payments {
+                ...PaymentWithRefunds
+            }
+            fulfillments {
+                ...Fulfillment
+            }
+            modifications {
+                id
+                createdAt
+                isSettled
+                priceChange
+                note
+                payment {
+                    id
+                    amount
+                }
+                lines {
+                    orderLineId
+                    quantity
+                }
+                refund {
+                    id
+                    paymentId
+                    total
+                }
+                surcharges {
+                    id
+                }
+            }
+        }
+    `,
+    [
+        discountFragment,
+        orderAddressFragment,
+        fulfillmentFragment,
+        orderLineFragment,
+        paymentWithRefundsFragment,
+    ],
+);
+
+export const orderDetailDocument = graphql(
+    `
+        query GetOrder($id: ID!) {
+            order(id: $id) {
+                ...OrderDetail
+                customFields
+            }
+        }
+    `,
+    [orderDetailFragment],
+);
+
+export const orderHistoryDocument = graphql(`
+    query GetOrderHistory($id: ID!, $options: HistoryEntryListOptions) {
+        order(id: $id) {
+            id
+            createdAt
+            updatedAt
+            code
+            currencyCode
+            history(options: $options) {
+                totalItems
+                items {
+                    id
+                    type
+                    createdAt
+                    isPublic
+                    administrator {
+                        id
+                        firstName
+                        lastName
+                    }
+                    data
+                }
+            }
+        }
+    }
+`);

package/src/app/routes/_authenticated/_orders/orders.tsx

@@ -0,0 +1,120 @@
+import { Money } from '@/components/data-display/money.js';
+import { DetailPageButton } from '@/components/shared/detail-page-button.js';
+import { Badge } from '@/components/ui/badge.js';
+import { Button } from '@/components/ui/button.js';
+import { ListPage } from '@/framework/page/list-page.js';
+import { Trans } from '@/lib/trans.js';
+import { createFileRoute, Link } from '@tanstack/react-router';
+import { orderListDocument } from './orders.graphql.js';
+import { useServerConfig } from '@/hooks/use-server-config.js';
+
+export const Route = createFileRoute('/_authenticated/_orders/orders')({
+    component: OrderListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Orders</Trans> }),
+});
+
+function OrderListPage() {
+    const serverConfig = useServerConfig();
+    return (
+        <ListPage
+            pageId="order-list"
+            title="Orders"
+            onSearchTermChange={searchTerm => {
+                return {
+                    code: {
+                        contains: searchTerm,
+                    },
+                    customerLastName: {
+                        contains: searchTerm,
+                    },
+                    transactionId: {
+                        contains: searchTerm,
+                    },
+                };
+            }}
+            defaultSort={[{ id: 'orderPlacedAt', desc: true }]}
+            transformVariables={variables => {
+                return {
+                    ...variables,
+                    filterOperator: 'OR',
+                };
+            }}
+            listQuery={orderListDocument}
+            route={Route}
+            customizeColumns={{
+                total: {
+                    header: 'Total',
+                    cell: ({ cell, row }) => {
+                        const value = cell.getValue();
+                        const currencyCode = row.original.currencyCode;
+                        return <Money value={value} currencyCode={currencyCode} />;
+                    },
+                },
+                totalWithTax: {
+                    header: 'Total with Tax',
+                    cell: ({ cell, row }) => {
+                        const value = cell.getValue();
+                        const currencyCode = row.original.currencyCode;
+                        return <Money value={value} currencyCode={currencyCode} />;
+                    },
+                },
+                state: {
+                    header: 'State',
+                    cell: ({ cell }) => {
+                        const value = cell.getValue() as string;
+                        return <Badge variant="outline">{value}</Badge>;
+                    },
+                },
+                code: {
+                    header: 'Code',
+                    cell: ({ cell, row }) => {
+                        const value = cell.getValue() as string;
+                        const id = row.original.id;
+                        return <DetailPageButton id={id} label={value} />;
+                    },
+                },
+                customer: {
+                    header: 'Customer',
+                    cell: ({ cell }) => {
+                        const value = cell.getValue();
+                        if (!value) {
+                            return null;
+                        }
+                        return (
+                            <Button asChild variant="ghost">
+                                <Link to={`/customers/${value.id}`}>
+                                    {value.firstName} {value.lastName}
+                                </Link>
+                            </Button>
+                        );
+                    },
+                },
+                shippingLines: {
+                    header: 'Shipping',
+                    cell: ({ cell }) => {
+                        const value = cell.getValue();
+                        return <div>{value.map(line => line.shippingMethod.name).join(', ')}</div>;
+                    },
+                },
+            }}
+            defaultVisibility={{
+                id: false,
+                createdAt: false,
+                updatedAt: false,
+                type: false,
+                currencyCode: false,
+            }}
+            facetedFilters={{
+                state: {
+                    title: 'State',
+                    options: serverConfig?.orderProcess.map(state => {
+                        return {
+                            label: state.name,
+                            value: state.name,
+                        }
+                    }) ?? [],
+                },
+            }}
+        />
+    );
+}

package/src/app/routes/_authenticated/_orders/orders_.$id.tsx

@@ -0,0 +1,133 @@
+import { ErrorPage } from '@/components/shared/error-page.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.js';
+import { Badge } from '@/components/ui/badge.js';
+import { Button } from '@/components/ui/button.js';
+import {
+    CustomFieldsPageBlock,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} from '@/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+import { Link, createFileRoute } from '@tanstack/react-router';
+import { User } from 'lucide-react';
+import { toast } from 'sonner';
+import { OrderAddress } from './components/order-address.js';
+import { OrderHistoryContainer } from './components/order-history/order-history-container.js';
+import { OrderTable } from './components/order-table.js';
+import { OrderTaxSummary } from './components/order-tax-summary.js';
+import { PaymentDetails } from './components/payment-details.js';
+import { orderDetailDocument } from './orders.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_orders/orders_/$id')({
+    component: OrderDetailPage,
+    loader: detailPageRouteLoader({
+        queryDocument: orderDetailDocument,
+        breadcrumb(_isNew, entity) {
+            return [{ path: '/orders', label: 'Orders' }, entity?.code];
+        },
+    }),
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function OrderDetailPage() {
+    const params = Route.useParams();
+    const { i18n } = useLingui();
+
+    const { form, submitHandler, entity, isPending } = useDetailPage({
+        queryDocument: orderDetailDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                customFields: entity.customFields,
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async () => {
+            toast(i18n.t('Successfully updated order'));
+            form.reset(form.getValues());
+        },
+        onError: err => {
+            toast(i18n.t('Failed to update order'), {
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    if (!entity) {
+        return null;
+    }
+
+    return (
+        <Page pageId="order-detail" form={form} submitHandler={submitHandler}>
+            <PageTitle>{entity?.code ?? ''}</PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateProduct', 'UpdateCatalog']}>
+                        <Button
+                            type="submit"
+                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                        >
+                            <Trans>Update</Trans>
+                        </Button>
+                    </PermissionGuard>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="main" blockId="order-table">
+                    <OrderTable order={entity} />
+                </PageBlock>
+                <PageBlock column="main" blockId="tax-summary" title={<Trans>Tax summary</Trans>}>
+                    <OrderTaxSummary order={entity} />
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="Order" control={form.control} />
+                <PageBlock column="main" blockId="order-history" title={<Trans>Order history</Trans>}>
+                    <OrderHistoryContainer orderId={entity.id} />
+                </PageBlock>
+                <PageBlock column="side" blockId="state" title={<Trans>State</Trans>}>
+                    <Badge variant="outline">{entity?.state}</Badge>
+                </PageBlock>
+                <PageBlock column="side" blockId="customer" title={<Trans>Customer</Trans>}>
+                    <Button variant="ghost" asChild>
+                        <Link to={`/customers/${entity?.customer?.id}`}>
+                            <User className="w-4 h-4" />
+                            {entity?.customer?.firstName} {entity?.customer?.lastName}
+                        </Link>
+                    </Button>
+                    <div className="mt-4 divide-y">
+                        {entity?.shippingAddress && (
+                            <div className="pb-6">
+                                <div className="font-medium">
+                                    <Trans>Shipping address</Trans>
+                                </div>
+                                <OrderAddress address={entity.shippingAddress} />
+                            </div>
+                        )}
+                        {entity?.billingAddress && (
+                            <div className="pt-4">
+                                <div className="font-medium">
+                                    <Trans>Billing address</Trans>
+                                </div>
+                                <OrderAddress address={entity.billingAddress} />
+                            </div>
+                        )}
+                    </div>
+                </PageBlock>
+                <PageBlock column="side" blockId="payment-details" title={<Trans>Payment details</Trans>}>
+                    {entity?.payments?.map(payment => (
+                        <PaymentDetails
+                            key={payment.id}
+                            payment={payment}
+                            currencyCode={entity.currencyCode}
+                        />
+                    ))}
+                </PageBlock>
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_payment-methods/components/payment-eligibility-checker-selector.tsx

@@ -0,0 +1,104 @@
+import { ConfigurableOperationInput } from '@/components/shared/configurable-operation-input.js';
+import { Button } from '@/components/ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.js';
+import { api } from '@/graphql/api.js';
+import { configurableOperationDefFragment, ConfigurableOperationDefFragment } from '@/graphql/fragments.js';
+import { graphql } from '@/graphql/graphql.js';
+import { Trans } from '@/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
+import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
+import { Plus } from 'lucide-react';
+
+export const paymentEligibilityCheckersDocument = graphql(
+    `
+        query GetPaymentEligibilityCheckers {
+            paymentMethodEligibilityCheckers {
+                ...ConfigurableOperationDef
+            }
+        }
+    `,
+    [configurableOperationDefFragment],
+);
+
+interface PaymentEligibilityCheckerSelectorProps {
+    value: ConfigurableOperationInputType | undefined;
+    onChange: (value: ConfigurableOperationInputType | undefined) => void;
+}
+
+export function PaymentEligibilityCheckerSelector({
+    value,
+    onChange,
+}: PaymentEligibilityCheckerSelectorProps) {
+    const { data: checkersData } = useQuery({
+        queryKey: ['paymentMethodEligibilityCheckers'],
+        queryFn: () => api.query(paymentEligibilityCheckersDocument),
+        staleTime: 1000 * 60 * 60 * 5,
+    });
+
+    const checkers = checkersData?.paymentMethodEligibilityCheckers;
+
+    const onCheckerSelected = (checker: ConfigurableOperationDefFragment) => {
+        const checkerDef = checkers?.find(c => c.code === checker.code);
+        if (!checkerDef) {
+            return;
+        }
+        onChange({
+            code: checker.code,
+            arguments: checkerDef.args.map(arg => ({
+                name: arg.name,
+                value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
+            })),
+        });
+    };
+
+    const onOperationValueChange = (newVal: ConfigurableOperationInputType) => {
+        onChange(newVal);
+    };
+
+    const onOperationRemove = () => {
+        onChange(undefined);
+    };
+
+    const checkerDef = checkers?.find(c => c.code === value?.code);
+
+    return (
+        <div className="flex flex-col gap-2 mt-4">
+            {value && checkerDef && (
+                <div className="flex flex-col gap-2">
+                    <ConfigurableOperationInput
+                        operationDefinition={checkerDef}
+                        value={value}
+                        onChange={value => onOperationValueChange(value)}
+                        onRemove={() => onOperationRemove()}
+                    />
+                </div>
+            )}
+            <DropdownMenu>
+                {!value?.code && (
+                    <DropdownMenuTrigger asChild>
+                        <Button variant="outline">
+                            <Plus />
+                            <Trans>Select Payment Eligibility Checker</Trans>
+                        </Button>
+                    </DropdownMenuTrigger>
+                )}
+                <DropdownMenuContent className="w-96">
+                    {checkers?.length ? (
+                        checkers?.map(checker => (
+                            <DropdownMenuItem key={checker.code} onClick={() => onCheckerSelected(checker)}>
+                                {checker.description}
+                            </DropdownMenuItem>
+                        ))
+                    ) : (
+                        <DropdownMenuItem>No checkers found</DropdownMenuItem>
+                    )}
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+    );
+}