feat(dashboard): Implement testing of shipping methods (#3833)

Author: michaelbromley

packages/dashboard/src/app/routes/_authenticated/_orders/utils/order-detail-loaders.tsx

@@ -6,7 +6,7 @@ import { redirect } from '@tanstack/react-router';
 import { OrderDetail } from '../components/order-detail-shared.js';
 import { orderDetailDocument } from '../orders.graphql.js';
 
-export async function commonRegularOrderLoader(context: any, params: { id: string }): Promise<OrderDetail> {
+async function ensureOrderWithIdExists(context: any, params: { id: string }): Promise<OrderDetail> {
     if (!params.id) {
         throw new Error('ID param is required');
     }
@@ -18,13 +18,18 @@ export async function commonRegularOrderLoader(context: any, params: { id: strin
     if (!result.order) {
         throw new Error(`Order with the ID ${params.id} was not found`);
     }
+    return result.order;
+}
 
-    if (result.order.state === 'Draft') {
+export async function commonRegularOrderLoader(context: any, params: { id: string }): Promise<OrderDetail> {
+    const order = await ensureOrderWithIdExists(context, params);
+
+    if (order.state === 'Draft') {
         throw redirect({
             to: `/orders/draft/${params.id}`,
         });
     }
-    return result.order;
+    return order;
 }
 
 export async function loadRegularOrder(context: any, params: { id: string }) {
@@ -42,7 +47,7 @@ export async function loadRegularOrder(context: any, params: { id: string }) {
 }
 
 export async function loadDraftOrder(context: any, params: { id: string }) {
-    const order = await commonRegularOrderLoader(context, params);
+    const order = await ensureOrderWithIdExists(context, params);
 
     if (order.state !== 'Draft') {
         throw redirect({

packages/dashboard/src/app/routes/_authenticated/_shipping-methods/components/metadata-badges.tsx

@@ -0,0 +1,15 @@
+import { Badge } from '@/vdb/components/ui/badge.js';
+import React from 'react';
+
+export function MetadataBadges({ metadata }: Readonly<{ metadata?: Record<string, any> }>) {
+    if (!metadata || Object.keys(metadata).length === 0) return null;
+    return (
+        <div className="mt-2 flex flex-wrap gap-1">
+            {Object.entries(metadata).map(([key, value]) => (
+                <Badge key={key} variant="outline" className="text-xs">
+                    {key}: {String(value)}
+                </Badge>
+            ))}
+        </div>
+    );
+}

packages/dashboard/src/app/routes/_authenticated/_shipping-methods/components/price-display.tsx

@@ -0,0 +1,21 @@
+import { Money } from '@/vdb/components/data-display/money.js';
+import { Trans } from '@/vdb/lib/trans.js';
+
+export function PriceDisplay({
+    price,
+    priceWithTax,
+    currencyCode,
+}: Readonly<{
+    price: number;
+    priceWithTax: number;
+    currencyCode: string;
+}>) {
+    return (
+        <div className="text-right">
+            <Money value={priceWithTax} currency={currencyCode} />
+            <div className="text-xs text-muted-foreground">
+                <Trans>ex. tax:</Trans> <Money value={price} currency={currencyCode} />
+            </div>
+        </div>
+    );
+}

packages/dashboard/src/app/routes/_authenticated/_shipping-methods/components/shipping-method-test-result-wrapper.tsx

@@ -0,0 +1,87 @@
+import { Alert, AlertDescription } from '@/vdb/components/ui/alert.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Card, CardContent, CardHeader, CardTitle } from '@/vdb/components/ui/card.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { PlayIcon } from 'lucide-react';
+import React from 'react';
+
+interface ShippingMethodTestResultWrapperProps {
+    okToRun: boolean;
+    testDataUpdated: boolean;
+    hasTestedOnce: boolean;
+    onRunTest: () => void;
+    loading?: boolean;
+    children: React.ReactNode;
+    emptyState?: React.ReactNode;
+    showEmptyState?: boolean;
+    runTestLabel?: React.ReactNode;
+    loadingLabel?: React.ReactNode;
+}
+
+export function ShippingMethodTestResultWrapper({
+    okToRun,
+    testDataUpdated,
+    hasTestedOnce,
+    onRunTest,
+    loading = false,
+    children,
+    emptyState,
+    showEmptyState = false,
+    runTestLabel = <Trans>Run Test</Trans>,
+    loadingLabel = <Trans>Testing shipping method...</Trans>,
+}: Readonly<ShippingMethodTestResultWrapperProps>) {
+    const canRunTest = okToRun && testDataUpdated;
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle className="flex items-center justify-between">
+                    <span>
+                        <Trans>Test Results</Trans>
+                    </span>
+                    {okToRun && (
+                        <Button
+                            onClick={onRunTest}
+                            disabled={!canRunTest || loading}
+                            size="sm"
+                            className="ml-auto"
+                        >
+                            <PlayIcon className="mr-1 h-4 w-4" />
+                            {runTestLabel}
+                        </Button>
+                    )}
+                </CardTitle>
+            </CardHeader>
+            <CardContent>
+                {!okToRun && (
+                    <Alert>
+                        <AlertDescription>
+                            <Trans>
+                                Please add products and complete the shipping address to run the test.
+                            </Trans>
+                        </AlertDescription>
+                    </Alert>
+                )}
+
+                {okToRun && testDataUpdated && hasTestedOnce && (
+                    <Alert variant="destructive">
+                        <AlertDescription>
+                            <Trans>
+                                Test data has been updated. Click "Run Test" to see updated results.
+                            </Trans>
+                        </AlertDescription>
+                    </Alert>
+                )}
+
+                {loading && (
+                    <div className="text-center py-8">
+                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
+                        <p className="mt-2 text-sm text-muted-foreground">{loadingLabel}</p>
+                    </div>
+                )}
+
+                {!loading && showEmptyState && emptyState}
+                {!loading && !showEmptyState && children}
+            </CardContent>
+        </Card>
+    );
+}