@vendure/dashboard 3.2.0 → 3.2.1

package/src/app/routes/_authenticated/_product-variants/components/variant-price-detail.tsx

@@ -1,87 +1,87 @@
-import { useEffect, useState } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { Trans } from '@/lib/trans.js';
-import { graphql } from '@/graphql/graphql.js';
-import { api } from '@/graphql/api.js';
-import { useChannel } from '@/hooks/use-channel.js';
-import { Money } from '@/components/data-display/money.js';
-
-const taxRatesDocument = graphql(`
-    query TaxRates($options: TaxRateListOptions) {
-        taxRates(options: $options) {
-            items {
-                id
-                value
-                zone {
-                    id
-                }
-                category {
-                    id
-                }
-            }
-        }
-    }
-`);
-interface VariantPriceDetailProps {
-    priceIncludesTax: boolean;
-    price: number | undefined;
-    currencyCode: string;
-    taxCategoryId: string | undefined;
-}
-
-export function VariantPriceDetail({
-    priceIncludesTax,
-    price,
-    currencyCode,
-    taxCategoryId,
-}: VariantPriceDetailProps) {
-    const { activeChannel } = useChannel();
-    const [taxRate, setTaxRate] = useState(0);
-    const [grossPrice, setGrossPrice] = useState(0);
-
-    // Fetch tax rates
-    const { data: taxRatesData } = useQuery({
-        queryKey: ['taxRates'],
-        queryFn: () => api.query(taxRatesDocument, { options: { take: 999, skip: 0 } }),
-    });
-
-    useEffect(() => {
-        if (!taxRatesData?.taxRates.items || !activeChannel) {
-            return;
-        }
-
-        const defaultTaxZone = activeChannel.defaultTaxZone?.id;
-        if (!defaultTaxZone) {
-            setTaxRate(0);
-            return;
-        }
-
-        const applicableRate = taxRatesData.taxRates.items.find(
-            taxRate => taxRate.zone.id === defaultTaxZone && taxRate.category.id === taxCategoryId,
-        );
-
-        if (!applicableRate) {
-            setTaxRate(0);
-            return;
-        }
-
-        setTaxRate(applicableRate.value);
-    }, [taxRatesData, activeChannel, taxCategoryId]);
-
-    useEffect(() => {
-        setGrossPrice(Math.round((price ?? 0) * ((100 + taxRate) / 100)));
-    }, [price, taxRate]);
-
-    return (
-        <div className="space-y-1">
-            <div className="text-sm text-muted-foreground">
-                <Trans>Tax rate: {taxRate}%</Trans>
-            </div>
-            <div className="text-sm">
-                <Trans>
-                    Gross price: <Money value={grossPrice} currency={currencyCode} />
-                </Trans>
-            </div>
-        </div>
-    );
-}
+import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Trans } from '@/lib/trans.js';
+import { graphql } from '@/graphql/graphql.js';
+import { api } from '@/graphql/api.js';
+import { useChannel } from '@/hooks/use-channel.js';
+import { Money } from '@/components/data-display/money.js';
+
+const taxRatesDocument = graphql(`
+    query TaxRates($options: TaxRateListOptions) {
+        taxRates(options: $options) {
+            items {
+                id
+                value
+                zone {
+                    id
+                }
+                category {
+                    id
+                }
+            }
+        }
+    }
+`);
+interface VariantPriceDetailProps {
+    priceIncludesTax: boolean;
+    price: number | undefined;
+    currencyCode: string;
+    taxCategoryId: string | undefined;
+}
+
+export function VariantPriceDetail({
+    priceIncludesTax,
+    price,
+    currencyCode,
+    taxCategoryId,
+}: VariantPriceDetailProps) {
+    const { activeChannel } = useChannel();
+    const [taxRate, setTaxRate] = useState(0);
+    const [grossPrice, setGrossPrice] = useState(0);
+
+    // Fetch tax rates
+    const { data: taxRatesData } = useQuery({
+        queryKey: ['taxRates'],
+        queryFn: () => api.query(taxRatesDocument, { options: { take: 999, skip: 0 } }),
+    });
+
+    useEffect(() => {
+        if (!taxRatesData?.taxRates.items || !activeChannel) {
+            return;
+        }
+
+        const defaultTaxZone = activeChannel.defaultTaxZone?.id;
+        if (!defaultTaxZone) {
+            setTaxRate(0);
+            return;
+        }
+
+        const applicableRate = taxRatesData.taxRates.items.find(
+            taxRate => taxRate.zone.id === defaultTaxZone && taxRate.category.id === taxCategoryId,
+        );
+
+        if (!applicableRate) {
+            setTaxRate(0);
+            return;
+        }
+
+        setTaxRate(applicableRate.value);
+    }, [taxRatesData, activeChannel, taxCategoryId]);
+
+    useEffect(() => {
+        setGrossPrice(Math.round((price ?? 0) * ((100 + taxRate) / 100)));
+    }, [price, taxRate]);
+
+    return (
+        <div className="space-y-1">
+            <div className="text-sm text-muted-foreground">
+                <Trans>Tax rate: {taxRate}%</Trans>
+            </div>
+            <div className="text-sm">
+                <Trans>
+                    Gross price: <Money value={grossPrice} currency={currencyCode} />
+                </Trans>
+            </div>
+        </div>
+    );
+}

package/src/app/routes/_authenticated/_product-variants/product-variants.graphql.ts

@@ -1,123 +1,123 @@
-import { assetFragment } from '@/graphql/fragments.js';
-import { graphql } from '@/graphql/graphql.js';
-
-export const productVariantListDocument = graphql(
-    `
-        query ProductVariantLis($options: ProductVariantListOptions) {
-            productVariants(options: $options) {
-                items {
-                    id
-                    createdAt
-                    updatedAt
-                    featuredAsset {
-                        ...Asset
-                    }
-                    name
-                    sku
-                    currencyCode
-                    price
-                    priceWithTax
-                    stockLevels {
-                        id
-                        stockOnHand
-                        stockAllocated
-                    }
-                    customFields
-                }
-                totalItems
-            }
-        }
-    `,
-    [assetFragment],
-);
-
-export const productVariantDetailDocument = graphql(
-    `
-        query ProductVariantDetail($id: ID!) {
-            productVariant(id: $id) {
-                id
-                createdAt
-                updatedAt
-                product {
-                    id
-                    name
-                }
-                enabled
-                featuredAsset {
-                    ...Asset
-                }
-                assets {
-                    ...Asset
-                }
-                facetValues {
-                    id
-                    code
-                    name
-                    facet {
-                        id
-                        code
-                        name
-                    }
-                }
-                translations {
-                    id
-                    languageCode
-                    name
-                }
-                name
-                sku
-                currencyCode
-                taxCategory {
-                    id
-                    name
-                    isDefault
-                }
-                price
-                priceWithTax
-                prices {
-                    currencyCode
-                    price
-                    customFields
-                }
-                trackInventory
-                outOfStockThreshold
-                stockLevels {
-                    id
-                    stockOnHand
-                    stockAllocated
-                    stockLocation {
-                        id
-                        name
-                    }
-                }
-                customFields
-            }
-        }
-    `,
-    [assetFragment],
-);
-
-export const createProductVariantDocument = graphql(`
-    mutation CreateProductVariant($input: [CreateProductVariantInput!]!) {
-        createProductVariants(input: $input) {
-            id
-        }
-    }
-`);
-
-export const updateProductVariantDocument = graphql(`
-    mutation UpdateProductVariant($input: UpdateProductVariantInput!) {
-        updateProductVariant(input: $input) {
-            id
-        }
-    }
-`);
-
-export const deleteProductVariantDocument = graphql(`
-    mutation DeleteProductVariant($id: ID!) {
-        deleteProductVariant(id: $id) {
-            result
-            message
-        }
-    }
-`);
+import { assetFragment } from '@/graphql/fragments.js';
+import { graphql } from '@/graphql/graphql.js';
+
+export const productVariantListDocument = graphql(
+    `
+        query ProductVariantLis($options: ProductVariantListOptions) {
+            productVariants(options: $options) {
+                items {
+                    id
+                    createdAt
+                    updatedAt
+                    featuredAsset {
+                        ...Asset
+                    }
+                    name
+                    sku
+                    currencyCode
+                    price
+                    priceWithTax
+                    stockLevels {
+                        id
+                        stockOnHand
+                        stockAllocated
+                    }
+                    customFields
+                }
+                totalItems
+            }
+        }
+    `,
+    [assetFragment],
+);
+
+export const productVariantDetailDocument = graphql(
+    `
+        query ProductVariantDetail($id: ID!) {
+            productVariant(id: $id) {
+                id
+                createdAt
+                updatedAt
+                product {
+                    id
+                    name
+                }
+                enabled
+                featuredAsset {
+                    ...Asset
+                }
+                assets {
+                    ...Asset
+                }
+                facetValues {
+                    id
+                    code
+                    name
+                    facet {
+                        id
+                        code
+                        name
+                    }
+                }
+                translations {
+                    id
+                    languageCode
+                    name
+                }
+                name
+                sku
+                currencyCode
+                taxCategory {
+                    id
+                    name
+                    isDefault
+                }
+                price
+                priceWithTax
+                prices {
+                    currencyCode
+                    price
+                    customFields
+                }
+                trackInventory
+                outOfStockThreshold
+                stockLevels {
+                    id
+                    stockOnHand
+                    stockAllocated
+                    stockLocation {
+                        id
+                        name
+                    }
+                }
+                customFields
+            }
+        }
+    `,
+    [assetFragment],
+);
+
+export const createProductVariantDocument = graphql(`
+    mutation CreateProductVariant($input: [CreateProductVariantInput!]!) {
+        createProductVariants(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateProductVariantDocument = graphql(`
+    mutation UpdateProductVariant($input: UpdateProductVariantInput!) {
+        updateProductVariant(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteProductVariantDocument = graphql(`
+    mutation DeleteProductVariant($id: ID!) {
+        deleteProductVariant(id: $id) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_product-variants/product-variants.tsx

@@ -1,78 +1,78 @@
-import { Money } from '@/components/data-display/money.js';
-import { DetailPageButton } from '@/components/shared/detail-page-button.js';
-import { PageActionBar } from '@/framework/layout-engine/page-layout.js';
-import { ListPage } from '@/framework/page/list-page.js';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
-import { Trans } from '@/lib/trans.js';
-import { createFileRoute } from '@tanstack/react-router';
-import { deleteProductVariantDocument, productVariantListDocument } from './product-variants.graphql.js';
-
-export const Route = createFileRoute('/_authenticated/_product-variants/product-variants')({
-    component: ProductListPage,
-    loader: () => ({ breadcrumb: () => <Trans>Product Variants</Trans> }),
-});
-
-function ProductListPage() {
-    const { formatCurrencyName } = useLocalFormat();
-    return (
-        <ListPage
-            pageId="product-variant-list"
-            title={<Trans>Product Variants</Trans>}
-            listQuery={productVariantListDocument}
-            deleteMutation={deleteProductVariantDocument}
-            customizeColumns={{
-                name: {
-                    header: 'Product Name',
-                    cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
-                },
-                currencyCode: {
-                    cell: ({ cell, row }) => {
-                        const value = cell.getValue();
-                        return formatCurrencyName(value as string, 'full');
-                    },
-                },
-                price: {
-                    cell: ({ cell, row }) => {
-                        const value = cell.getValue();
-                        const currencyCode = row.original.currencyCode;
-                        if (typeof value === 'number') {
-                            return <Money value={value} currency={currencyCode} />;
-                        }
-                        return value;
-                    },
-                },
-                priceWithTax: {
-                    cell: ({ cell, row }) => {
-                        const value = cell.getValue();
-                        const currencyCode = row.original.currencyCode;
-                        if (typeof value === 'number') {
-                            return <Money value={value} currency={currencyCode} />;
-                        }
-                        return value;
-                    },
-                },
-                stockLevels: {
-                    cell: ({ cell, row }) => {
-                        const value = cell.getValue();
-                        if (Array.isArray(value)) {
-                            const totalOnHand = value.reduce((acc, curr) => acc + curr.stockOnHand, 0);
-                            const totalAllocated = value.reduce((acc, curr) => acc + curr.stockAllocated, 0);
-                            return (
-                                <span>
-                                    {totalOnHand} / {totalAllocated}
-                                </span>
-                            );
-                        }
-                        return value;
-                    },
-                },
-            }}
-            onSearchTermChange={searchTerm => {
-                return {
-                    name: { contains: searchTerm },
-                };
-            }}
-            route={Route}
-        ></ListPage>
-    );
-}
+import { Money } from '@/components/data-display/money.js';
+import { DetailPageButton } from '@/components/shared/detail-page-button.js';
+import { PageActionBar } from '@/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/framework/page/list-page.js';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { Trans } from '@/lib/trans.js';
+import { createFileRoute } from '@tanstack/react-router';
+import { deleteProductVariantDocument, productVariantListDocument } from './product-variants.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_product-variants/product-variants')({
+    component: ProductListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Product Variants</Trans> }),
+});
+
+function ProductListPage() {
+    const { formatCurrencyName } = useLocalFormat();
+    return (
+        <ListPage
+            pageId="product-variant-list"
+            title={<Trans>Product Variants</Trans>}
+            listQuery={productVariantListDocument}
+            deleteMutation={deleteProductVariantDocument}
+            customizeColumns={{
+                name: {
+                    header: 'Product Name',
+                    cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
+                },
+                currencyCode: {
+                    cell: ({ cell, row }) => {
+                        const value = cell.getValue();
+                        return formatCurrencyName(value as string, 'full');
+                    },
+                },
+                price: {
+                    cell: ({ cell, row }) => {
+                        const value = cell.getValue();
+                        const currencyCode = row.original.currencyCode;
+                        if (typeof value === 'number') {
+                            return <Money value={value} currency={currencyCode} />;
+                        }
+                        return value;
+                    },
+                },
+                priceWithTax: {
+                    cell: ({ cell, row }) => {
+                        const value = cell.getValue();
+                        const currencyCode = row.original.currencyCode;
+                        if (typeof value === 'number') {
+                            return <Money value={value} currency={currencyCode} />;
+                        }
+                        return value;
+                    },
+                },
+                stockLevels: {
+                    cell: ({ cell, row }) => {
+                        const value = cell.getValue();
+                        if (Array.isArray(value)) {
+                            const totalOnHand = value.reduce((acc, curr) => acc + curr.stockOnHand, 0);
+                            const totalAllocated = value.reduce((acc, curr) => acc + curr.stockAllocated, 0);
+                            return (
+                                <span>
+                                    {totalOnHand} / {totalAllocated}
+                                </span>
+                            );
+                        }
+                        return value;
+                    },
+                },
+            }}
+            onSearchTermChange={searchTerm => {
+                return {
+                    name: { contains: searchTerm },
+                };
+            }}
+            route={Route}
+        ></ListPage>
+    );
+}