@vendure/dashboard 3.2.0

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

@@ -0,0 +1,100 @@
+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 paymentHandlersDocument = graphql(
+    `
+        query GetPaymentHandlers {
+            paymentMethodHandlers {
+                ...ConfigurableOperationDef
+            }
+        }
+    `,
+    [configurableOperationDefFragment],
+);
+
+interface PaymentHandlerSelectorProps {
+    value: ConfigurableOperationInputType | undefined;
+    onChange: (value: ConfigurableOperationInputType | undefined) => void;
+}
+
+export function PaymentHandlerSelector({
+    value,
+    onChange,
+}: PaymentHandlerSelectorProps) {
+    const { data: handlersData } = useQuery({
+        queryKey: ['paymentMethodHandlers'],
+        queryFn: () => api.query(paymentHandlersDocument),
+        staleTime: 1000 * 60 * 60 * 5,
+    });
+
+    const handlers = handlersData?.paymentMethodHandlers;
+
+    const onHandlerSelected = (handler: ConfigurableOperationDefFragment) => {
+        const handlerDef = handlers?.find(h => h.code === handler.code);
+        if (!handlerDef) {
+            return;
+        }
+        onChange({
+            code: handler.code,
+            arguments: handlerDef.args.map(arg => ({
+                name: arg.name,
+                value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
+            })),
+        });
+    };
+
+    const onOperationValueChange = (newVal: ConfigurableOperationInputType) => {
+        onChange(newVal);
+    };
+
+    const onOperationRemove = () => {
+        onChange(undefined);
+    };
+
+    const handlerDef = handlers?.find(h => h.code === value?.code);
+
+    return (
+        <div className="flex flex-col gap-2 mt-4">
+            {value && handlerDef && (
+                <div className="flex flex-col gap-2">
+                    <ConfigurableOperationInput
+                        operationDefinition={handlerDef}
+                        value={value}
+                        onChange={value => onOperationValueChange(value)}
+                        onRemove={() => onOperationRemove()}
+                    />
+                </div>
+            )}
+            <DropdownMenu>
+                {!value?.code && (
+                    <DropdownMenuTrigger asChild>
+                        <Button variant="outline">
+                            <Plus />
+                            <Trans>Select Payment Handler</Trans>
+                        </Button>
+                    </DropdownMenuTrigger>
+                )}
+                <DropdownMenuContent className="w-96">
+                    {handlers?.map(handler => (
+                        <DropdownMenuItem key={handler.code} onClick={() => onHandlerSelected(handler)}>
+                            {handler.description}
+                        </DropdownMenuItem>
+                    ))}
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+    );
+}

package/src/app/routes/_authenticated/_payment-methods/payment-methods.graphql.ts

@@ -0,0 +1,83 @@
+import { configurableOperationFragment } from '@/graphql/fragments.js';
+import { graphql } from '@/graphql/graphql.js';
+
+export const paymentMethodItemFragment = graphql(`
+    fragment PaymentMethodItem on PaymentMethod {
+        id
+        createdAt
+        updatedAt
+        name
+        description
+        code
+        enabled
+    }
+`);
+
+export const paymentMethodListQuery = graphql(
+    `
+        query PaymentMethodList {
+            paymentMethods {
+                items {
+                    ...PaymentMethodItem
+                }
+                totalItems
+            }
+        }
+    `,
+    [paymentMethodItemFragment],
+);
+
+export const paymentMethodDetailDocument = graphql(
+    `
+        query PaymentMethodDetail($id: ID!) {
+            paymentMethod(id: $id) {
+                id
+                createdAt
+                updatedAt
+                name
+                code
+                description
+                enabled
+                translations {
+                    id
+                    languageCode
+                    name
+                    description
+                }
+                checker {
+                    ...ConfigurableOperation
+                }
+                handler {
+                    ...ConfigurableOperation
+                }
+                customFields
+            }
+        }
+    `,
+    [configurableOperationFragment],
+);
+
+export const createPaymentMethodDocument = graphql(`
+    mutation CreatePaymentMethod($input: CreatePaymentMethodInput!) {
+        createPaymentMethod(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updatePaymentMethodDocument = graphql(`
+    mutation UpdatePaymentMethod($input: UpdatePaymentMethodInput!) {
+        updatePaymentMethod(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deletePaymentMethodDocument = graphql(`
+    mutation DeletePaymentMethod($id: ID!) {
+        deletePaymentMethod(id: $id) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_payment-methods/payment-methods.tsx

@@ -0,0 +1,64 @@
+import { BooleanDisplayBadge } from '@/components/data-display/boolean.js';
+import { DetailPageButton } from '@/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.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 { PlusIcon } from 'lucide-react';
+import { deletePaymentMethodDocument, paymentMethodListQuery } from './payment-methods.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_payment-methods/payment-methods')({
+    component: PaymentMethodListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Payment Methods</Trans> }),
+});
+
+function PaymentMethodListPage() {
+    return (
+        <ListPage
+            pageId="payment-method-list"
+            listQuery={paymentMethodListQuery}
+            deleteMutation={deletePaymentMethodDocument}
+            route={Route}
+            title="Payment Methods"
+            defaultVisibility={{
+                name: true,
+                code: true,
+                enabled: true,
+            }}
+            onSearchTermChange={searchTerm => {
+                return {
+                    name: { contains: searchTerm },
+                };
+            }}
+            facetedFilters={{
+                enabled: {
+                    title: 'Enabled',
+                    options: [
+                        { label: 'Enabled', value: true },
+                        { label: 'Disabled', value: false },
+                    ],
+                },
+            }}
+            customizeColumns={{
+                name: {
+                    header: 'Name',
+                    cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
+                },
+                enabled: {
+                    header: 'Enabled',
+                    cell: ({ row }) => <BooleanDisplayBadge value={row.original.enabled} />,
+                },
+            }}
+        >
+            <PermissionGuard requires={['CreatePaymentMethod']}>
+                <Button asChild>
+                    <Link to="./new">
+                        <PlusIcon className="mr-2 h-4 w-4" />
+                        New Payment Method
+                    </Link>
+                </Button>
+            </PermissionGuard>
+        </ListPage>
+    );
+}

package/src/app/routes/_authenticated/_payment-methods/payment-methods_.$id.tsx

@@ -0,0 +1,183 @@
+import { RichTextInput } from '@/components/data-input/richt-text-input.js';
+import { ErrorPage } from '@/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.js';
+import { TranslatableFormFieldWrapper } from '@/components/shared/translatable-form-field.js';
+import { Button } from '@/components/ui/button.js';
+import { Input } from '@/components/ui/input.js';
+import { Switch } from '@/components/ui/switch.js';
+import { NEW_ENTITY_PATH } from '@/constants.js';
+import {
+    CustomFieldsPageBlock,
+    DetailFormGrid,
+    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 { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { toast } from 'sonner';
+import { PaymentEligibilityCheckerSelector } from './components/payment-eligibility-checker-selector.js';
+import { PaymentHandlerSelector } from './components/payment-handler-selector.js';
+import {
+    createPaymentMethodDocument,
+    paymentMethodDetailDocument,
+    updatePaymentMethodDocument,
+} from './payment-methods.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_payment-methods/payment-methods_/$id')({
+    component: PaymentMethodDetailPage,
+    loader: detailPageRouteLoader({
+        queryDocument: paymentMethodDetailDocument,
+        breadcrumb(_isNew, entity) {
+            return [{ path: '/payment-methods', label: 'Payment methods' }, entity?.name];
+        },
+    }),
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function PaymentMethodDetailPage() {
+    const params = Route.useParams();
+    const navigate = useNavigate();
+    const creatingNewEntity = params.id === NEW_ENTITY_PATH;
+    const { i18n } = useLingui();
+
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        queryDocument: paymentMethodDetailDocument,
+        createDocument: createPaymentMethodDocument,
+        updateDocument: updatePaymentMethodDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                enabled: entity.enabled,
+                name: entity.name,
+                code: entity.code,
+                description: entity.description,
+                checker: entity.checker?.code
+                    ? {
+                          code: entity.checker?.code,
+                          arguments: entity.checker?.args,
+                      }
+                    : null,
+                handler: entity.handler?.code
+                    ? {
+                          code: entity.handler?.code,
+                          arguments: entity.handler?.args,
+                      }
+                    : null,
+                translations: entity.translations.map(translation => ({
+                    id: translation.id,
+                    languageCode: translation.languageCode,
+                    name: translation.name,
+                    description: translation.description,
+                })),
+                customFields: entity.customFields,
+            };
+        },
+        transformCreateInput: input => {
+            return {
+                ...input,
+                checker: input.checker?.code ? input.checker : undefined,
+                handler: input.handler,
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast.success(i18n.t('Successfully updated payment method'));
+            resetForm();
+            if (creatingNewEntity) {
+                await navigate({ to: `../$id`, params: { id: data.id } });
+            }
+        },
+        onError: err => {
+            toast.error(i18n.t('Failed to update payment method'), {
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    return (
+        <Page pageId="payment-method-detail" form={form} submitHandler={submitHandler}>
+            <PageTitle>
+                {creatingNewEntity ? <Trans>New payment method</Trans> : (entity?.name ?? '')}
+            </PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdatePaymentMethod']}>
+                        <Button
+                            type="submit"
+                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                        >
+                            <Trans>Update</Trans>
+                        </Button>
+                    </PermissionGuard>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="side" blockId="enabled">
+                    <FormFieldWrapper
+                        control={form.control}
+                        name="enabled"
+                        label={<Trans>Enabled</Trans>}
+                        render={({ field }) => (
+                            <Switch checked={field.value ?? false} onCheckedChange={field.onChange} />
+                        )}
+                    />
+                </PageBlock>
+                <PageBlock column="main" blockId="main-form">
+                    <DetailFormGrid>
+                        <TranslatableFormFieldWrapper
+                            control={form.control}
+                            name="name"
+                            label={<Trans>Name</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="code"
+                            label={<Trans>Code</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                    </DetailFormGrid>
+                    <TranslatableFormFieldWrapper
+                        control={form.control}
+                        name="description"
+                        label={<Trans>Description</Trans>}
+                        render={({ field }) => <RichTextInput {...field} />}
+                    />
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="PaymentMethod" control={form.control} />
+                <PageBlock
+                    column="main"
+                    blockId="payment-eligibility-checker"
+                    title={<Trans>Payment eligibility checker</Trans>}
+                >
+                    <FormFieldWrapper
+                        control={form.control}
+                        name="checker"
+                        render={({ field }) => (
+                            <PaymentEligibilityCheckerSelector
+                                value={field.value}
+                                onChange={field.onChange}
+                            />
+                        )}
+                    />
+                </PageBlock>
+                <PageBlock column="main" blockId="payment-handler" title={<Trans>Calculator</Trans>}>
+                    <FormFieldWrapper
+                        control={form.control}
+                        name="handler"
+                        render={({ field }) => (
+                            <PaymentHandlerSelector value={field.value} onChange={field.onChange} />
+                        )}
+                    />
+                </PageBlock>
+            </PageLayout>
+        </Page>
+    );
+}

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

@@ -0,0 +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>
+    );
+}

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

@@ -0,0 +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
+        }
+    }
+`);