@wilshop/dashboard 3.5.2

package/src/app/routes/_authenticated/_shipping-methods/components/test-shipping-methods.tsx

@@ -0,0 +1,74 @@
+import { Accordion } from '@/vdb/components/ui/accordion.js';
+import { api } from '@/vdb/graphql/api.js';
+import { useQuery } from '@tanstack/react-query';
+import { testEligibleShippingMethodsDocument } from '../shipping-methods.graphql.js';
+import { TestAddressForm } from './test-address-form.js';
+import { TestOrderBuilder } from './test-order-builder.js';
+import { TestShippingMethodsResult } from './test-shipping-methods-result.js';
+import { useShippingMethodTestState } from './use-shipping-method-test-state.js';
+
+export function TestShippingMethods() {
+    const {
+        testAddress,
+        testOrderLines,
+        testDataUpdated,
+        hasTestedOnce,
+        expandedAccordions,
+        setExpandedAccordions,
+        allTestDataPresent,
+        handleAddressChange,
+        handleOrderLinesChange,
+        markTestRun,
+    } = useShippingMethodTestState();
+
+    const { data, isLoading, refetch } = useQuery({
+        queryKey: ['testEligibleShippingMethods', testAddress, testOrderLines],
+        queryFn: async () => {
+            if (!testAddress || !testOrderLines.length) {
+                return { testEligibleShippingMethods: [] };
+            }
+            return api.query(testEligibleShippingMethodsDocument, {
+                input: {
+                    shippingAddress: testAddress,
+                    lines: testOrderLines.map(l => ({
+                        productVariantId: l.id,
+                        quantity: l.quantity,
+                    })),
+                },
+            });
+        },
+        enabled: false,
+    });
+
+    const testResult = data?.testEligibleShippingMethods || [];
+
+    const runTest = () => {
+        if (allTestDataPresent) {
+            markTestRun();
+            refetch();
+        }
+    };
+
+    return (
+        <div className="space-y-6 overflow-y-auto max-h-[calc(100vh-200px)] px-4">
+            <Accordion
+                type="multiple"
+                value={expandedAccordions}
+                onValueChange={setExpandedAccordions}
+                className="w-full"
+            >
+                <TestOrderBuilder onOrderLinesChange={handleOrderLinesChange} />
+                <TestAddressForm onAddressChange={handleAddressChange} />
+            </Accordion>
+
+            <TestShippingMethodsResult
+                testResult={testResult}
+                okToRun={allTestDataPresent}
+                testDataUpdated={testDataUpdated}
+                hasTestedOnce={hasTestedOnce}
+                onRunTest={runTest}
+                loading={isLoading}
+            />
+        </div>
+    );
+}

package/src/app/routes/_authenticated/_shipping-methods/components/test-single-method-result.tsx

@@ -0,0 +1,90 @@
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { Trans } from '@lingui/react/macro';
+import { ResultOf } from 'gql.tada';
+import { Check } from 'lucide-react';
+import { testShippingMethodDocument } from '../shipping-methods.graphql.js';
+import { MetadataBadges } from './metadata-badges.js';
+import { PriceDisplay } from './price-display.js';
+import { ShippingMethodTestResultWrapper } from './shipping-method-test-result-wrapper.js';
+
+export type TestShippingMethodResult = ResultOf<typeof testShippingMethodDocument>['testShippingMethod'];
+
+interface TestSingleMethodResultProps {
+    testResult?: TestShippingMethodResult;
+    okToRun: boolean;
+    testDataUpdated: boolean;
+    hasTestedOnce: boolean;
+    onRunTest: () => void;
+    loading?: boolean;
+}
+
+export function TestSingleMethodResult({
+                                           testResult,
+                                           okToRun,
+                                           testDataUpdated,
+                                           hasTestedOnce,
+                                           onRunTest,
+                                           loading = false,
+                                       }: Readonly<TestSingleMethodResultProps>) {
+    const { activeChannel } = useChannel();
+    const currencyCode = activeChannel?.defaultCurrencyCode ?? 'USD';
+    const showEmptyState = testResult === undefined && hasTestedOnce && !testDataUpdated && !loading;
+
+    return (
+        <ShippingMethodTestResultWrapper
+            okToRun={okToRun}
+            testDataUpdated={testDataUpdated}
+            hasTestedOnce={hasTestedOnce}
+            onRunTest={onRunTest}
+            loading={loading}
+            showEmptyState={showEmptyState}
+            emptyState={
+                <div className="text-center py-8 text-muted-foreground">
+                    <Trans>Click "Run Test" to test this shipping method.</Trans>
+                </div>
+            }
+            loadingLabel={<Trans>Testing shipping method...</Trans>}
+        >
+            {testResult && (
+                <div className="space-y-4">
+                    {testResult.eligible ? (
+                        <div className="space-y-3">
+                            {testResult.quote && (
+                                <div className="p-3 border rounded-lg bg-muted/50">
+                                    <div className="flex justify-between items-center">
+                                        <div className="flex items-center gap-2">
+                                            <Check className="h-5 w-5 text-success" />
+                                            <span className="text-sm">
+                                                <Trans>Shipping method is eligible for this order</Trans>
+                                            </span>
+                                        </div>
+                                        <PriceDisplay
+                                            price={testResult.quote.price}
+                                            priceWithTax={testResult.quote.priceWithTax}
+                                            currencyCode={currencyCode}
+                                        />
+                                    </div>
+                                    <div className="flex-1">
+                                        <MetadataBadges metadata={testResult.quote.metadata} />
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    ) : (
+                        <div className="text-center py-8">
+                            <p className="text-destructive">
+                                <Trans>Shipping method is not eligible for this order</Trans>
+                            </p>
+                            <p className="text-sm text-muted-foreground mt-2">
+                                <Trans>
+                                    This shipping method's eligibility checker conditions are not met for the
+                                    current order and shipping address.
+                                </Trans>
+                            </p>
+                        </div>
+                    )}
+                </div>
+            )}
+        </ShippingMethodTestResultWrapper>
+    );
+}

package/src/app/routes/_authenticated/_shipping-methods/components/test-single-shipping-method-sheet.tsx

@@ -0,0 +1,56 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Sheet,
+    SheetContent,
+    SheetDescription,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger,
+} from '@/vdb/components/ui/sheet.js';
+import { Trans } from '@lingui/react/macro';
+import { VariablesOf } from 'gql.tada';
+import { FlaskConical } from 'lucide-react';
+import { useState } from 'react';
+import { testShippingMethodDocument } from '../shipping-methods.graphql.js';
+import { TestSingleShippingMethod } from './test-single-shipping-method.js';
+
+interface TestSingleShippingMethodDialogProps {
+    checker?: VariablesOf<typeof testShippingMethodDocument>['input']['checker'];
+    calculator?: VariablesOf<typeof testShippingMethodDocument>['input']['calculator'];
+}
+
+export function TestSingleShippingMethodSheet({
+                                                  checker,
+                                                  calculator,
+                                              }: Readonly<TestSingleShippingMethodDialogProps>) {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <Sheet open={open} onOpenChange={setOpen}>
+            <SheetTrigger asChild>
+                <Button variant="secondary">
+                    <FlaskConical />
+                    <Trans>Test</Trans>
+                </Button>
+            </SheetTrigger>
+            <SheetContent className="w-[800px] sm:max-w-[800px]">
+                <SheetHeader>
+                    <SheetTitle>
+                        <Trans>Test Shipping Method</Trans>
+                    </SheetTitle>
+                    <SheetDescription>
+                        <Trans>
+                            Test this shipping method by simulating an order to see if it's eligible and what
+                            the shipping cost would be.
+                        </Trans>
+                    </SheetDescription>
+                </SheetHeader>
+                <div className="mt-6">
+                    {checker && calculator ? (
+                        <TestSingleShippingMethod checker={checker} calculator={calculator} />
+                    ) : null}
+                </div>
+            </SheetContent>
+        </Sheet>
+    );
+}

package/src/app/routes/_authenticated/_shipping-methods/components/test-single-shipping-method.tsx

@@ -0,0 +1,82 @@
+import { Accordion } from '@/vdb/components/ui/accordion.js';
+import { api } from '@/vdb/graphql/api.js';
+import { useQuery } from '@tanstack/react-query';
+import { VariablesOf } from 'gql.tada';
+import { testShippingMethodDocument } from '../shipping-methods.graphql.js';
+import { TestAddressForm } from './test-address-form.js';
+import { TestOrderBuilder } from './test-order-builder.js';
+import { TestSingleMethodResult } from './test-single-method-result.js';
+import { useShippingMethodTestState } from './use-shipping-method-test-state.js';
+
+interface TestSingleShippingMethodProps {
+    checker: VariablesOf<typeof testShippingMethodDocument>['input']['checker'];
+    calculator: VariablesOf<typeof testShippingMethodDocument>['input']['calculator'];
+}
+
+export function TestSingleShippingMethod({ checker, calculator }: Readonly<TestSingleShippingMethodProps>) {
+    const {
+        testAddress,
+        testOrderLines,
+        testDataUpdated,
+        hasTestedOnce,
+        expandedAccordions,
+        setExpandedAccordions,
+        allTestDataPresent,
+        handleAddressChange,
+        handleOrderLinesChange,
+        markTestRun,
+    } = useShippingMethodTestState();
+
+    const { data, isLoading, refetch } = useQuery({
+        queryKey: ['testShippingMethod', testAddress, testOrderLines, checker, calculator],
+        queryFn: async () => {
+            if (!testAddress || !testOrderLines.length) {
+                return { testShippingMethod: undefined };
+            }
+            return api.query(testShippingMethodDocument, {
+                input: {
+                    shippingAddress: testAddress,
+                    lines: testOrderLines.map(l => ({
+                        productVariantId: l.id,
+                        quantity: l.quantity,
+                    })),
+                    checker,
+                    calculator,
+                },
+            });
+        },
+        enabled: false,
+    });
+
+    const testResult = data?.testShippingMethod;
+
+    const runTest = () => {
+        if (allTestDataPresent) {
+            markTestRun();
+            refetch();
+        }
+    };
+
+    return (
+        <div className="space-y-6 overflow-y-auto max-h-[calc(100vh-200px)] px-4">
+            <Accordion
+                type="multiple"
+                value={expandedAccordions}
+                onValueChange={setExpandedAccordions}
+                className="w-full"
+            >
+                <TestOrderBuilder onOrderLinesChange={handleOrderLinesChange} />
+                <TestAddressForm onAddressChange={handleAddressChange} />
+            </Accordion>
+
+            <TestSingleMethodResult
+                testResult={testResult}
+                okToRun={allTestDataPresent}
+                testDataUpdated={testDataUpdated}
+                hasTestedOnce={hasTestedOnce}
+                onRunTest={runTest}
+                loading={isLoading}
+            />
+        </div>
+    );
+}

package/src/app/routes/_authenticated/_shipping-methods/components/use-shipping-method-test-state.ts

@@ -0,0 +1,67 @@
+import { useCallback, useState } from 'react';
+
+import { TestAddress } from './test-address-form.js';
+import { TestOrderLine } from './test-order-builder.js';
+
+export function useShippingMethodTestState() {
+    const [testAddress, setTestAddress] = useState<TestAddress | null>(null);
+    const [testOrderLines, setTestOrderLines] = useState<TestOrderLine[]>([]);
+    const [testDataUpdated, setTestDataUpdated] = useState(true);
+    const [hasTestedOnce, setHasTestedOnce] = useState(false);
+    const [expandedAccordions, setExpandedAccordions] = useState<string[]>([
+        'test-order',
+        'shipping-address',
+    ]);
+    const [lastTestedAddress, setLastTestedAddress] = useState<TestAddress | null>(null);
+    const [lastTestedOrderLines, setLastTestedOrderLines] = useState<TestOrderLine[]>([]);
+
+    const allTestDataPresent = !!(testAddress && testOrderLines && testOrderLines.length > 0);
+
+    const handleAddressChange = useCallback(
+        (address: TestAddress) => {
+            setTestAddress(address);
+            if (hasTestedOnce && JSON.stringify(address) !== JSON.stringify(lastTestedAddress)) {
+                setTestDataUpdated(true);
+            }
+        },
+        [hasTestedOnce, lastTestedAddress],
+    );
+
+    const handleOrderLinesChange = useCallback(
+        (lines: TestOrderLine[]) => {
+            setTestOrderLines(lines);
+            if (hasTestedOnce && JSON.stringify(lines) !== JSON.stringify(lastTestedOrderLines)) {
+                setTestDataUpdated(true);
+            }
+        },
+        [hasTestedOnce, lastTestedOrderLines],
+    );
+
+    // runTest now only updates state; actual query logic is handled in the component
+    const markTestRun = () => {
+        setTestDataUpdated(false);
+        setHasTestedOnce(true);
+        setLastTestedAddress(testAddress);
+        setLastTestedOrderLines(testOrderLines);
+        setExpandedAccordions([]); // Collapse all accordions
+    };
+
+    return {
+        testAddress,
+        setTestAddress,
+        testOrderLines,
+        setTestOrderLines,
+        testDataUpdated,
+        setTestDataUpdated,
+        hasTestedOnce,
+        setHasTestedOnce,
+        expandedAccordions,
+        setExpandedAccordions,
+        lastTestedAddress,
+        lastTestedOrderLines,
+        allTestDataPresent,
+        handleAddressChange,
+        handleOrderLinesChange,
+        markTestRun,
+    };
+}

package/src/app/routes/_authenticated/_shipping-methods/shipping-methods.graphql.ts

@@ -0,0 +1,137 @@
+import { configurableOperationFragment } from '@/vdb/graphql/fragments.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+
+export const shippingMethodItemFragment = graphql(`
+    fragment ShippingMethodItem on ShippingMethod {
+        id
+        name
+        code
+        description
+        fulfillmentHandlerCode
+        createdAt
+        updatedAt
+    }
+`);
+
+export const shippingMethodListQuery = graphql(
+    `
+        query ShippingMethodList($options: ShippingMethodListOptions) {
+            shippingMethods(options: $options) {
+                items {
+                    ...ShippingMethodItem
+                }
+                totalItems
+            }
+        }
+    `,
+    [shippingMethodItemFragment],
+);
+
+export const shippingMethodDetailDocument = graphql(
+    `
+        query ShippingMethodDetail($id: ID!) {
+            shippingMethod(id: $id) {
+                id
+                createdAt
+                updatedAt
+                code
+                name
+                description
+                fulfillmentHandlerCode
+                checker {
+                    ...ConfigurableOperation
+                }
+                calculator {
+                    ...ConfigurableOperation
+                }
+                translations {
+                    id
+                    languageCode
+                    name
+                    description
+                }
+                customFields
+            }
+        }
+    `,
+    [configurableOperationFragment],
+);
+
+export const createShippingMethodDocument = graphql(`
+    mutation CreateShippingMethod($input: CreateShippingMethodInput!) {
+        createShippingMethod(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateShippingMethodDocument = graphql(`
+    mutation UpdateShippingMethod($input: UpdateShippingMethodInput!) {
+        updateShippingMethod(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteShippingMethodDocument = graphql(`
+    mutation DeleteShippingMethod($id: ID!) {
+        deleteShippingMethod(id: $id) {
+            result
+            message
+        }
+    }
+`);
+
+export const deleteShippingMethodsDocument = graphql(`
+    mutation DeleteShippingMethods($ids: [ID!]!) {
+        deleteShippingMethods(ids: $ids) {
+            result
+            message
+        }
+    }
+`);
+
+export const assignShippingMethodsToChannelDocument = graphql(`
+    mutation AssignShippingMethodsToChannel($input: AssignShippingMethodsToChannelInput!) {
+        assignShippingMethodsToChannel(input: $input) {
+            id
+            name
+        }
+    }
+`);
+
+export const removeShippingMethodsFromChannelDocument = graphql(`
+    mutation RemoveShippingMethodsFromChannel($input: RemoveShippingMethodsFromChannelInput!) {
+        removeShippingMethodsFromChannel(input: $input) {
+            id
+            name
+        }
+    }
+`);
+
+export const testEligibleShippingMethodsDocument = graphql(`
+    query TestEligibleShippingMethods($input: TestEligibleShippingMethodsInput!) {
+        testEligibleShippingMethods(input: $input) {
+            id
+            name
+            code
+            description
+            price
+            priceWithTax
+            metadata
+        }
+    }
+`);
+
+export const testShippingMethodDocument = graphql(`
+    query TestShippingMethod($input: TestShippingMethodInput!) {
+        testShippingMethod(input: $input) {
+            eligible
+            quote {
+                price
+                priceWithTax
+                metadata
+            }
+        }
+    }
+`);

package/src/app/routes/_authenticated/_shipping-methods/shipping-methods.tsx

@@ -0,0 +1,76 @@
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { RichTextDescriptionCell } from '@/vdb/components/shared/table-cell/order-table-cell-components.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/vdb/framework/page/list-page.js';
+import { Trans } from '@lingui/react/macro';
+import { createFileRoute, Link } from '@tanstack/react-router';
+import { PlusIcon } from 'lucide-react';
+import {
+    AssignShippingMethodsToChannelBulkAction,
+    DeleteShippingMethodsBulkAction,
+    RemoveShippingMethodsFromChannelBulkAction,
+} from './components/shipping-method-bulk-actions.js';
+import { TestShippingMethodsSheet } from './components/test-shipping-methods-sheet.js';
+import { shippingMethodListQuery } from './shipping-methods.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_shipping-methods/shipping-methods')({
+    component: ShippingMethodListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Shipping Methods</Trans> }),
+});
+
+function ShippingMethodListPage() {
+    return (
+        <ListPage
+            pageId="shipping-method-list"
+            listQuery={shippingMethodListQuery}
+            route={Route}
+            title={<Trans>Shipping Methods</Trans>}
+            defaultVisibility={{
+                name: true,
+                code: true,
+                fulfillmentHandlerCode: true,
+            }}
+            customizeColumns={{
+                name: {
+                    cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
+                },
+                description: {
+                    cell: RichTextDescriptionCell,
+                },
+            }}
+            onSearchTermChange={searchTerm => {
+                return {
+                    name: { contains: searchTerm },
+                };
+            }}
+            bulkActions={[
+                {
+                    component: AssignShippingMethodsToChannelBulkAction,
+                    order: 100,
+                },
+                {
+                    component: RemoveShippingMethodsFromChannelBulkAction,
+                    order: 200,
+                },
+                {
+                    component: DeleteShippingMethodsBulkAction,
+                    order: 500,
+                },
+            ]}
+        >
+            <PageActionBarRight>
+                <TestShippingMethodsSheet />
+                <PermissionGuard requires={['CreateShippingMethod']}>
+                    <Button asChild>
+                        <Link to="./new">
+                            <PlusIcon className="mr-2 h-4 w-4" />
+                            <Trans>New Shipping Method</Trans>
+                        </Link>
+                    </Button>
+                </PermissionGuard>
+            </PageActionBarRight>
+        </ListPage>
+    );
+}