@vendure/dashboard 3.2.0 → 3.2.2

package/src/app/routes/_authenticated/_customers/components/customer-order-table.tsx

@@ -1,88 +1,88 @@
-import { Money } from "@/components/data-display/money.js";
-import { PaginatedListDataTable } from "@/components/shared/paginated-list-data-table.js";
-import { Badge } from "@/components/ui/badge.js";
-import { Button } from "@/components/ui/button.js";
-import { Link } from "@tanstack/react-router";
-import { ColumnFiltersState, SortingState } from "@tanstack/react-table";
-import { useState } from "react";
-import { customerOrderListDocument } from "../customers.graphql.js";
-
-interface CustomerOrderTableProps {
-    customerId: string;
-}
-
-export function CustomerOrderTable({ customerId }: CustomerOrderTableProps) {
-    const [page, setPage] = useState(1);
-    const [pageSize, setPageSize] = useState(10);
-    const [sorting, setSorting] = useState<SortingState>([{ id: 'orderPlacedAt', desc: true }]);
-    const [filters, setFilters] = useState<ColumnFiltersState>([]);
-
-    return <PaginatedListDataTable
-        listQuery={customerOrderListDocument}
-        transformVariables={variables => {
-            return {
-                ...variables,
-                customerId,
-            };
-        }}
-        defaultVisibility={{
-            id: false,
-            createdAt: false,
-            updatedAt: false,
-            type: false,
-            currencyCode: false,
-            total: false,
-        }}
-        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 (
-                        <Button asChild variant="ghost">
-                            <Link to={`/orders/${id}`}>{value}</Link>
-                        </Button>
-                    );
-                },
-            },
-        }}
-        page={page}
-        itemsPerPage={pageSize}
-        sorting={sorting}
-        columnFilters={filters}
-        onPageChange={(_, page, perPage) => {
-            setPage(page);
-            setPageSize(perPage);
-        }}
-        onSortChange={(_, sorting) => {
-            setSorting(sorting);
-        }}
-        onFilterChange={(_, filters) => {
-            setFilters(filters);
-        }}
-    />;
-}
+import { Money } from "@/components/data-display/money.js";
+import { PaginatedListDataTable } from "@/components/shared/paginated-list-data-table.js";
+import { Badge } from "@/components/ui/badge.js";
+import { Button } from "@/components/ui/button.js";
+import { Link } from "@tanstack/react-router";
+import { ColumnFiltersState, SortingState } from "@tanstack/react-table";
+import { useState } from "react";
+import { customerOrderListDocument } from "../customers.graphql.js";
+
+interface CustomerOrderTableProps {
+    customerId: string;
+}
+
+export function CustomerOrderTable({ customerId }: CustomerOrderTableProps) {
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [sorting, setSorting] = useState<SortingState>([{ id: 'orderPlacedAt', desc: true }]);
+    const [filters, setFilters] = useState<ColumnFiltersState>([]);
+
+    return <PaginatedListDataTable
+        listQuery={customerOrderListDocument}
+        transformVariables={variables => {
+            return {
+                ...variables,
+                customerId,
+            };
+        }}
+        defaultVisibility={{
+            id: false,
+            createdAt: false,
+            updatedAt: false,
+            type: false,
+            currencyCode: false,
+            total: false,
+        }}
+        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 (
+                        <Button asChild variant="ghost">
+                            <Link to={`/orders/${id}`}>{value}</Link>
+                        </Button>
+                    );
+                },
+            },
+        }}
+        page={page}
+        itemsPerPage={pageSize}
+        sorting={sorting}
+        columnFilters={filters}
+        onPageChange={(_, page, perPage) => {
+            setPage(page);
+            setPageSize(perPage);
+        }}
+        onSortChange={(_, sorting) => {
+            setSorting(sorting);
+        }}
+        onFilterChange={(_, filters) => {
+            setFilters(filters);
+        }}
+    />;
+}

package/src/app/routes/_authenticated/_customers/components/customer-status-badge.tsx

@@ -1,33 +1,33 @@
-import { Badge } from '@/components/ui/badge.js';
-import { BadgeX, BadgeCheck } from 'lucide-react';
-import { Trans } from '@/lib/trans.js';
-
-export type CustomerStatus = 'guest' | 'registered' | 'verified';
-
-export interface CustomerStatusBadgeProps {
-    user?: { verified: boolean } | null;
-}
-
-export function CustomerStatusBadge({ user }: CustomerStatusBadgeProps) {
-    const status = user ? (user.verified ? 'verified' : 'registered') : 'guest';
-    return (
-        <Badge variant="outline">
-            {status === 'verified' ? (
-                <div className="flex items-center gap-2">
-                    <BadgeCheck className="w-4 h-4 text-success" />
-                    <Trans>Verified</Trans>
-                </div>
-            ) : status === 'registered' ? (
-                <div className="flex items-center gap-2">
-                    <BadgeCheck className="w-4 h-4" />
-                    <Trans>Registered</Trans>
-                </div>
-            ) : (
-                <div className="flex items-center gap-2">
-                    <BadgeX className="w-4 h-4" />
-                    <Trans>Unverified</Trans>
-                </div>
-            )}
-        </Badge>
-    );
-}
+import { Badge } from '@/components/ui/badge.js';
+import { BadgeX, BadgeCheck } from 'lucide-react';
+import { Trans } from '@/lib/trans.js';
+
+export type CustomerStatus = 'guest' | 'registered' | 'verified';
+
+export interface CustomerStatusBadgeProps {
+    user?: { verified: boolean } | null;
+}
+
+export function CustomerStatusBadge({ user }: CustomerStatusBadgeProps) {
+    const status = user ? (user.verified ? 'verified' : 'registered') : 'guest';
+    return (
+        <Badge variant="outline">
+            {status === 'verified' ? (
+                <div className="flex items-center gap-2">
+                    <BadgeCheck className="w-4 h-4 text-success" />
+                    <Trans>Verified</Trans>
+                </div>
+            ) : status === 'registered' ? (
+                <div className="flex items-center gap-2">
+                    <BadgeCheck className="w-4 h-4" />
+                    <Trans>Registered</Trans>
+                </div>
+            ) : (
+                <div className="flex items-center gap-2">
+                    <BadgeX className="w-4 h-4" />
+                    <Trans>Unverified</Trans>
+                </div>
+            )}
+        </Badge>
+    );
+}

package/src/app/routes/_authenticated/_customers/customers.graphql.ts

@@ -1,204 +1,204 @@
-import { graphql } from '@/graphql/graphql.js';
-import { gql } from 'awesome-graphql-client';
-
-export const customerListDocument = graphql(`
-    query GetCustomerList($options: CustomerListOptions) {
-        customers(options: $options) {
-            items {
-                id
-                createdAt
-                updatedAt
-                firstName
-                lastName
-                emailAddress
-                user {
-                    id
-                    verified
-                }
-            }
-            totalItems
-        }
-    }
-`);
-
-export const addressFragment = graphql(`
-    fragment Address on Address {
-        id
-        createdAt
-        updatedAt
-        fullName
-        company
-        streetLine1
-        streetLine2
-        city
-        province
-        postalCode
-        country {
-            id
-            code
-            name
-        }
-        phoneNumber
-        defaultShippingAddress
-        defaultBillingAddress
-    }
-`);
-
-export const customerDetailDocument = graphql(
-    `
-        query GetCustomerDetail($id: ID!) {
-            customer(id: $id) {
-                id
-                createdAt
-                updatedAt
-                title
-                firstName
-                lastName
-                phoneNumber
-                emailAddress
-                groups {
-                    id
-                    name
-                }
-                user {
-                    id
-                    identifier
-                    verified
-                    lastLogin
-                }
-                addresses {
-                    ...Address
-                }
-                customFields
-            }
-        }
-    `,
-    [addressFragment],
-);
-
-export const customerOrderListDocument = graphql(`
-    query GetCustomerOrderList($options: OrderListOptions, $customerId: ID!) {
-        customer(id: $customerId) {
-            id
-            orders(options: $options) {
-                items {
-                    id
-                    createdAt
-                    updatedAt
-                    type
-                    code
-                    orderPlacedAt
-                    state
-                    total
-                    totalWithTax
-                    currencyCode
-                }
-                totalItems
-            }
-        }
-    }
-`);
-
-export const createCustomerDocument = graphql(`
-    mutation CreateCustomer($input: CreateCustomerInput!) {
-        createCustomer(input: $input) {
-            __typename
-            ... on Customer {
-                id
-            }
-            ... on ErrorResult {
-                errorCode
-                message
-            }
-        }
-    }
-`);
-
-export const updateCustomerDocument = graphql(`
-    mutation UpdateCustomer($input: UpdateCustomerInput!) {
-        updateCustomer(input: $input) {
-            __typename
-            ... on Customer {
-                id
-            }
-            ... on ErrorResult {
-                errorCode
-                message
-            }
-        }
-    }
-`);
-
-export const deleteCustomerDocument = graphql(`
-    mutation DeleteCustomer($id: ID!) {
-        deleteCustomer(id: $id) {
-            result
-            message
-        }
-    }
-`);
-
-export const createCustomerAddressDocument = graphql(`
-    mutation CreateCustomerAddress($customerId: ID!, $input: CreateAddressInput!) {
-        createCustomerAddress(customerId: $customerId, input: $input) {
-            id
-        }
-    }
-`);
-
-export const updateCustomerAddressDocument = graphql(`
-    mutation UpdateCustomerAddress($input: UpdateAddressInput!) {
-        updateCustomerAddress(input: $input) {
-            id
-        }
-    }
-`);
-
-export const deleteCustomerAddressDocument = graphql(`
-    mutation DeleteCustomerAddress($id: ID!) {
-        deleteCustomerAddress(id: $id) {
-            success
-        }
-    }
-`);
-
-export const customerHistoryDocument = graphql(`
-    query GetCustomerHistory($id: ID!, $options: HistoryEntryListOptions) {
-        customer(id: $id) {
-            id
-            createdAt
-            updatedAt
-            history(options: $options) {
-                totalItems
-                items {
-                    id
-                    type
-                    createdAt
-                    isPublic
-                    administrator {
-                        id
-                        firstName
-                        lastName
-                    }
-                    data
-                }
-            }
-        }
-    }
-`);
-
-export const addCustomerToGroupDocument = graphql(`
-    mutation AddCustomerToGroup($customerId: ID!, $groupId: ID!) {
-        addCustomersToGroup(customerIds: [$customerId], customerGroupId: $groupId) {
-            id
-        }
-    }
-`);
-
-export const removeCustomerFromGroupDocument = graphql(`
-    mutation RemoveCustomerFromGroup($customerId: ID!, $groupId: ID!) {
-        removeCustomersFromGroup(customerIds: [$customerId], customerGroupId: $groupId) {
-            id
-        }
-    }
-`);
+import { graphql } from '@/graphql/graphql.js';
+import { gql } from 'awesome-graphql-client';
+
+export const customerListDocument = graphql(`
+    query GetCustomerList($options: CustomerListOptions) {
+        customers(options: $options) {
+            items {
+                id
+                createdAt
+                updatedAt
+                firstName
+                lastName
+                emailAddress
+                user {
+                    id
+                    verified
+                }
+            }
+            totalItems
+        }
+    }
+`);
+
+export const addressFragment = graphql(`
+    fragment Address on Address {
+        id
+        createdAt
+        updatedAt
+        fullName
+        company
+        streetLine1
+        streetLine2
+        city
+        province
+        postalCode
+        country {
+            id
+            code
+            name
+        }
+        phoneNumber
+        defaultShippingAddress
+        defaultBillingAddress
+    }
+`);
+
+export const customerDetailDocument = graphql(
+    `
+        query GetCustomerDetail($id: ID!) {
+            customer(id: $id) {
+                id
+                createdAt
+                updatedAt
+                title
+                firstName
+                lastName
+                phoneNumber
+                emailAddress
+                groups {
+                    id
+                    name
+                }
+                user {
+                    id
+                    identifier
+                    verified
+                    lastLogin
+                }
+                addresses {
+                    ...Address
+                }
+                customFields
+            }
+        }
+    `,
+    [addressFragment],
+);
+
+export const customerOrderListDocument = graphql(`
+    query GetCustomerOrderList($options: OrderListOptions, $customerId: ID!) {
+        customer(id: $customerId) {
+            id
+            orders(options: $options) {
+                items {
+                    id
+                    createdAt
+                    updatedAt
+                    type
+                    code
+                    orderPlacedAt
+                    state
+                    total
+                    totalWithTax
+                    currencyCode
+                }
+                totalItems
+            }
+        }
+    }
+`);
+
+export const createCustomerDocument = graphql(`
+    mutation CreateCustomer($input: CreateCustomerInput!) {
+        createCustomer(input: $input) {
+            __typename
+            ... on Customer {
+                id
+            }
+            ... on ErrorResult {
+                errorCode
+                message
+            }
+        }
+    }
+`);
+
+export const updateCustomerDocument = graphql(`
+    mutation UpdateCustomer($input: UpdateCustomerInput!) {
+        updateCustomer(input: $input) {
+            __typename
+            ... on Customer {
+                id
+            }
+            ... on ErrorResult {
+                errorCode
+                message
+            }
+        }
+    }
+`);
+
+export const deleteCustomerDocument = graphql(`
+    mutation DeleteCustomer($id: ID!) {
+        deleteCustomer(id: $id) {
+            result
+            message
+        }
+    }
+`);
+
+export const createCustomerAddressDocument = graphql(`
+    mutation CreateCustomerAddress($customerId: ID!, $input: CreateAddressInput!) {
+        createCustomerAddress(customerId: $customerId, input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateCustomerAddressDocument = graphql(`
+    mutation UpdateCustomerAddress($input: UpdateAddressInput!) {
+        updateCustomerAddress(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteCustomerAddressDocument = graphql(`
+    mutation DeleteCustomerAddress($id: ID!) {
+        deleteCustomerAddress(id: $id) {
+            success
+        }
+    }
+`);
+
+export const customerHistoryDocument = graphql(`
+    query GetCustomerHistory($id: ID!, $options: HistoryEntryListOptions) {
+        customer(id: $id) {
+            id
+            createdAt
+            updatedAt
+            history(options: $options) {
+                totalItems
+                items {
+                    id
+                    type
+                    createdAt
+                    isPublic
+                    administrator {
+                        id
+                        firstName
+                        lastName
+                    }
+                    data
+                }
+            }
+        }
+    }
+`);
+
+export const addCustomerToGroupDocument = graphql(`
+    mutation AddCustomerToGroup($customerId: ID!, $groupId: ID!) {
+        addCustomersToGroup(customerIds: [$customerId], customerGroupId: $groupId) {
+            id
+        }
+    }
+`);
+
+export const removeCustomerFromGroupDocument = graphql(`
+    mutation RemoveCustomerFromGroup($customerId: ID!, $groupId: ID!) {
+        removeCustomersFromGroup(customerIds: [$customerId], customerGroupId: $groupId) {
+            id
+        }
+    }
+`);