@vendure/dashboard 3.2.2 → 3.2.4

package/src/app/routes/_authenticated/_orders/orders_.draft.$id.tsx

@@ -0,0 +1,418 @@
+import { ConfirmationDialog } from '@/components/shared/confirmation-dialog.js';
+import { CustomerSelector } from '@/components/shared/customer-selector.js';
+import { ErrorPage } from '@/components/shared/error-page.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.js';
+import { Button } from '@/components/ui/button.js';
+import { Form } from '@/components/ui/form.js';
+import { addCustomFields } from '@/framework/document-introspection/add-custom-fields.js';
+import { useGeneratedForm } from '@/framework/form-engine/use-generated-form.js';
+import { CustomFieldsPageBlock, Page, PageActionBar, PageActionBarRight, PageBlock, PageLayout, PageTitle } from '@/framework/layout-engine/page-layout.js';
+import { getDetailQueryOptions, useDetailPage } from '@/framework/page/use-detail-page.js';
+import { api } from '@/graphql/api.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { createFileRoute, Link, redirect, useNavigate } from '@tanstack/react-router';
+import { ResultOf } from 'gql.tada';
+import { User } from 'lucide-react';
+import { toast } from 'sonner';
+import { CustomerAddressSelector } from './components/customer-address-selector.js';
+import { EditOrderTable } from './components/edit-order-table.js';
+import { OrderAddress } from './components/order-address.js';
+import { addItemToDraftOrderDocument, adjustDraftOrderLineDocument, applyCouponCodeToDraftOrderDocument, deleteDraftOrderDocument, draftOrderEligibleShippingMethodsDocument, orderDetailDocument, removeCouponCodeFromDraftOrderDocument, removeDraftOrderLineDocument, setBillingAddressForDraftOrderDocument, setCustomerForDraftOrderDocument, setDraftOrderCustomFieldsDocument, setDraftOrderShippingMethodDocument, setShippingAddressForDraftOrderDocument, transitionOrderToStateDocument, unsetBillingAddressForDraftOrderDocument, unsetShippingAddressForDraftOrderDocument } from './orders.graphql.js';
+import { CustomFieldsForm } from '@/components/shared/custom-fields-form.js';
+
+export const Route = createFileRoute('/_authenticated/_orders/orders_/draft/$id')({
+    component: DraftOrderPage,
+    loader: async ({
+        context,
+        params,
+    }) => {
+        if (!params.id) {
+            throw new Error('ID param is required');
+        }
+
+        const result: ResultOf<typeof orderDetailDocument> = await context.queryClient.ensureQueryData(
+            getDetailQueryOptions(addCustomFields(orderDetailDocument), { id: params.id }),
+            { id: params.id },
+        );
+
+        if (!result.order) {
+            throw new Error(`Order with the ID ${params.id} was not found`);
+        }
+
+        if (result.order.state !== 'Draft') {
+            throw redirect({
+                to: `/orders/${params.id}`,
+            });
+        }
+
+        return {
+            breadcrumb: [{ path: '/orders', label: 'Orders' }, result.order.code],
+        };
+    },
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function DraftOrderPage() {
+    const params = Route.useParams();
+    const { i18n } = useLingui();
+    const navigate = useNavigate();
+
+    const { entity, refreshEntity, form } = useDetailPage({
+        queryDocument: addCustomFields(orderDetailDocument),
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                customFields: entity.customFields,
+            };
+        },
+        params: { id: params.id },
+    });
+
+    const { form: orderLineForm } = useGeneratedForm({
+        document: addCustomFields(adjustDraftOrderLineDocument),
+        varName: undefined,
+        entity: entity?.lines[0],
+        setValues: entity => {
+            return {
+                orderId: entity.id,
+                input: {
+                    quantity: entity.quantity,
+                    orderLineId: entity.id,
+                    customFields: entity.customFields,
+                }
+            };
+        },
+    });
+
+    const { form: orderCustomFieldsForm } = useGeneratedForm({
+        document: setDraftOrderCustomFieldsDocument,
+        varName: undefined,
+        entity: entity,
+        setValues: entity => {
+            return {
+                orderId: entity.id,
+                input: {
+                    id: entity.id,
+                    customFields: entity.customFields,
+                }
+            };
+        },
+    });
+
+    const { mutate: setDraftOrderCustomFields } = useMutation({
+        mutationFn: api.mutate(setDraftOrderCustomFieldsDocument),
+        onSuccess: (result: ResultOf<typeof setDraftOrderCustomFieldsDocument>) => {
+            refreshEntity();
+        },
+    });
+
+    const { data: eligibleShippingMethods } = useQuery({
+        queryKey: ['eligibleShippingMethods', entity?.id],
+        queryFn: () => api.query(draftOrderEligibleShippingMethodsDocument, { orderId: entity?.id ?? '' }),
+        enabled: !!entity?.shippingAddress?.streetLine1,
+    });
+
+    const { mutate: addItemToDraftOrder } = useMutation({
+        mutationFn: api.mutate(addItemToDraftOrderDocument),
+        onSuccess: (result: ResultOf<typeof addItemToDraftOrderDocument>) => {
+            const order = result.addItemToDraftOrder;
+            switch (order.__typename) {
+                case 'Order':
+                    toast.success(i18n.t('Item added to order'));
+                    refreshEntity();
+                    break;
+                default:
+                    toast.error(order.message);
+                    break;
+            }
+        },
+    });
+
+    const { mutate: adjustDraftOrderLine } = useMutation({
+        mutationFn: api.mutate(adjustDraftOrderLineDocument),
+        onSuccess: (result: ResultOf<typeof adjustDraftOrderLineDocument>) => {
+            const order = result.adjustDraftOrderLine;
+            switch (order.__typename) {
+                case 'Order':
+                    toast.success(i18n.t('Order line updated'));
+                    refreshEntity();
+                    break;
+                default:
+                    toast.error(order.message);
+                    break;
+            }
+        },
+    });
+
+    const { mutate: removeDraftOrderLine } = useMutation({
+        mutationFn: api.mutate(removeDraftOrderLineDocument),
+        onSuccess: (result: ResultOf<typeof removeDraftOrderLineDocument>) => {
+            const order = result.removeDraftOrderLine;
+            switch (order.__typename) {
+                case 'Order':
+                    toast.success(i18n.t('Order line removed'));
+                    refreshEntity();
+                    break;
+                default:
+                    toast.error(order.message);
+                    break;
+            }
+        },
+    });
+
+    const { mutate: setCustomerForDraftOrder } = useMutation({
+        mutationFn: api.mutate(setCustomerForDraftOrderDocument),
+        onSuccess: (result: ResultOf<typeof setCustomerForDraftOrderDocument>) => {
+            const order = result.setCustomerForDraftOrder;
+            switch (order.__typename) {
+                case 'Order':
+                    toast.success(i18n.t('Customer set for order'));
+                    refreshEntity();
+                    break;
+                default:
+                    toast.error(order.message);
+                    break;
+            }
+        },
+    });
+
+    const { mutate: setShippingAddressForDraftOrder } = useMutation({
+        mutationFn: api.mutate(setShippingAddressForDraftOrderDocument),
+        onSuccess: (result: ResultOf<typeof setShippingAddressForDraftOrderDocument>) => {
+            toast.success(i18n.t('Shipping address set for order'));
+            refreshEntity();
+        },
+    });
+
+    const { mutate: setBillingAddressForDraftOrder } = useMutation({
+        mutationFn: api.mutate(setBillingAddressForDraftOrderDocument),
+        onSuccess: (result: ResultOf<typeof setBillingAddressForDraftOrderDocument>) => {
+            toast.success(i18n.t('Billing address set for order'));
+            refreshEntity();
+        },
+    });
+
+    const { mutate: unsetShippingAddressForDraftOrder } = useMutation({
+        mutationFn: api.mutate(unsetShippingAddressForDraftOrderDocument),
+        onSuccess: (result: ResultOf<typeof unsetShippingAddressForDraftOrderDocument>) => {
+            toast.success(i18n.t('Shipping address unset for order'));
+            refreshEntity();
+        },
+    });
+
+    const { mutate: unsetBillingAddressForDraftOrder } = useMutation({
+        mutationFn: api.mutate(unsetBillingAddressForDraftOrderDocument),
+        onSuccess: (result: ResultOf<typeof unsetBillingAddressForDraftOrderDocument>) => {
+            toast.success(i18n.t('Billing address unset for order'));
+            refreshEntity();
+        },
+    });
+
+    const { mutate: setShippingMethodForDraftOrder } = useMutation({
+        mutationFn: api.mutate(setDraftOrderShippingMethodDocument),
+        onSuccess: (result: ResultOf<typeof setDraftOrderShippingMethodDocument>) => {
+            const order = result.setDraftOrderShippingMethod;
+            switch (order.__typename) {
+                case 'Order':
+                    toast.success(i18n.t('Shipping method set for order'));
+                    refreshEntity();
+                    break;
+                default:
+                    toast.error(order.message);
+                    break;
+            }
+        },
+    });
+
+    const { mutate: setCouponCodeForDraftOrder } = useMutation({
+        mutationFn: api.mutate(applyCouponCodeToDraftOrderDocument),
+        onSuccess: (result: ResultOf<typeof applyCouponCodeToDraftOrderDocument>) => {
+            const order = result.applyCouponCodeToDraftOrder;
+            switch (order.__typename) {
+                case 'Order':
+                    toast.success(i18n.t('Coupon code set for order'));
+                    refreshEntity();
+                    break;
+                default:
+                    toast.error(order.message);
+                    break;
+            }
+        },
+    });
+
+    const { mutate: removeCouponCodeForDraftOrder } = useMutation({
+        mutationFn: api.mutate(removeCouponCodeFromDraftOrderDocument),
+        onSuccess: (result: ResultOf<typeof removeCouponCodeFromDraftOrderDocument>) => {
+            const order = result.removeCouponCodeFromDraftOrder;
+            toast.success(i18n.t('Coupon code removed from order'));
+            refreshEntity();
+        },
+    });
+
+    const { mutate: completeDraftOrder } = useMutation({
+        mutationFn: api.mutate(transitionOrderToStateDocument),
+        onSuccess: async (result: ResultOf<typeof transitionOrderToStateDocument>) => {
+            const order = result.transitionOrderToState;
+            switch (order?.__typename) {
+                case 'Order':
+                    toast.success(i18n.t('Draft order completed'));
+                    refreshEntity();
+                    setTimeout(() => {
+                        navigate({ to: `/orders/$id`, params: { id: order.id } });
+                    }, 500);
+                    break;
+                default:
+                    toast.error(order ? order.message : 'Unknown error');
+                    break;
+            }
+        },
+    });
+
+    const { mutate: deleteDraftOrder } = useMutation({
+        mutationFn: api.mutate(deleteDraftOrderDocument),
+        onSuccess: (result: ResultOf<typeof deleteDraftOrderDocument>) => {
+            if (result.deleteDraftOrder.result === 'DELETED') {
+                toast.success(i18n.t('Draft order deleted'));
+                navigate({ to: '/orders' });
+            } else {
+                toast.error(result.deleteDraftOrder.message);
+            }
+        },
+    });
+
+    if (!entity) {
+        return null;
+    }
+
+    const onSaveCustomFields = (values: any) => {
+        setDraftOrderCustomFields({ input: { id: entity.id, customFields: values.input?.customFields }, orderId: entity.id });
+    }
+
+    return (
+        <Page pageId="draft-order-detail" form={form}>
+            <PageTitle><Trans>Draft order</Trans>: {entity?.code ?? ''}</PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['DeleteOrder']}>
+                        <ConfirmationDialog
+                            title={i18n.t('Delete draft order')}
+                            description={i18n.t('Are you sure you want to delete this draft order?')}
+                            onConfirm={() => {
+                                deleteDraftOrder({ orderId: entity.id });
+                            }}
+                        >
+                            <Button variant="destructive" type="button">
+                                <Trans>Delete draft</Trans>
+                            </Button>
+                        </ConfirmationDialog>
+
+                    </PermissionGuard>
+                    <PermissionGuard requires={['UpdateOrder']}>
+                        <Button type="button"
+                            disabled={!entity.customer || entity.lines.length === 0 || entity.shippingLines.length === 0 || entity.state !== 'Draft'}
+                            onClick={() => completeDraftOrder({ id: entity.id, state: 'ArrangingPayment' })}
+                        >
+                            <Trans>Complete draft</Trans>
+                        </Button>
+                    </PermissionGuard>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="main" blockId="order-table">
+                    <EditOrderTable order={entity}
+                        eligibleShippingMethods={eligibleShippingMethods?.eligibleShippingMethodsForDraftOrder ?? []}
+                        onSetShippingMethod={(e) => setShippingMethodForDraftOrder({ orderId: entity.id, shippingMethodId: e.shippingMethodId })}
+                        onAddItem={(e) => addItemToDraftOrder({ orderId: entity.id, input: { productVariantId: e.productVariantId, quantity: 1 } })}
+                        onAdjustLine={(e) => adjustDraftOrderLine({ orderId: entity.id, input: { orderLineId: e.lineId, quantity: e.quantity, customFields: e.customFields } as any })}
+                        onRemoveLine={(e) => removeDraftOrderLine({ orderId: entity.id, orderLineId: e.lineId })}
+                        onApplyCouponCode={(e) => setCouponCodeForDraftOrder({ orderId: entity.id, couponCode: e.couponCode })}
+                        onRemoveCouponCode={(e) => removeCouponCodeForDraftOrder({ orderId: entity.id, couponCode: e.couponCode })}
+                        orderLineForm={orderLineForm}
+                    />
+                </PageBlock>
+                <PageBlock column="main" blockId="order-custom-fields" title={<Trans>Custom fields</Trans>}>
+                    <Form {...orderCustomFieldsForm}>
+                        <CustomFieldsForm entityType="Order" control={orderCustomFieldsForm.control} formPathPrefix='input' />
+                        <div className="mt-4">
+                            <Button type="submit" className=""
+                                disabled={!orderCustomFieldsForm.formState.isValid || !orderCustomFieldsForm.formState.isDirty}
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    orderCustomFieldsForm.handleSubmit(onSaveCustomFields)();
+                                }}>
+                                <Trans>Set custom fields</Trans>
+                            </Button>
+                        </div>
+                    </Form>
+                </PageBlock>
+                <PageBlock column="side" blockId="customer" title={<Trans>Customer</Trans>}>
+                    {entity?.customer?.id ? <Button variant="ghost" asChild className="mb-4">
+                        <Link to={`/customers/${entity?.customer?.id}`}>
+                            <User className="w-4 h-4" />
+                            {entity?.customer?.firstName} {entity?.customer?.lastName}
+                        </Link>
+                    </Button> : null}
+                    <CustomerSelector onSelect={customer => {
+                        setCustomerForDraftOrder({ orderId: entity.id, customerId: customer.id });
+                    }} />
+                </PageBlock>
+                <PageBlock column="side" blockId="shipping-address" title={<Trans>Shipping address</Trans>}>
+                    <div className="flex flex-col">
+                        <OrderAddress address={entity.shippingAddress ?? undefined} />
+                        {entity.shippingAddress?.streetLine1
+                            ? <RemoveAddressButton onClick={() => unsetShippingAddressForDraftOrder({ orderId: entity.id })} />
+                            : <CustomerAddressSelector customerId={entity.customer?.id} onSelect={address => {
+                                setShippingAddressForDraftOrder({
+                                    orderId: entity.id, input: {
+                                        fullName: address.fullName,
+                                        company: address.company,
+                                        streetLine1: address.streetLine1,
+                                        streetLine2: address.streetLine2,
+                                        city: address.city,
+                                        province: address.province,
+                                        postalCode: address.postalCode,
+                                        countryCode: address.country.code,
+                                        phoneNumber: address.phoneNumber,
+                                    }
+                                });
+                            }} />
+                        }
+                    </div>
+                </PageBlock>
+                <PageBlock column="side" blockId="billing-address" title={<Trans>Billing address</Trans>}>
+                    <div className="flex flex-col">
+                        <OrderAddress address={entity.billingAddress ?? undefined} />
+                        {entity.billingAddress?.streetLine1
+                            ? <RemoveAddressButton onClick={() => unsetBillingAddressForDraftOrder({ orderId: entity.id })} />
+                            : <CustomerAddressSelector customerId={entity.customer?.id} onSelect={address => {
+                                setBillingAddressForDraftOrder({
+                                    orderId: entity.id, input: {
+                                        fullName: address.fullName,
+                                        company: address.company,
+                                        streetLine1: address.streetLine1,
+                                        streetLine2: address.streetLine2,
+                                        city: address.city,
+                                        province: address.province,
+                                        postalCode: address.postalCode,
+                                        countryCode: address.country.code,
+                                        phoneNumber: address.phoneNumber,
+                                    }
+                                });
+                            }} />
+                        }
+                    </div>
+                </PageBlock>
+            </PageLayout>
+        </Page>
+    );
+}
+
+function RemoveAddressButton(props: { onClick: () => void }) {
+    return (<div className="">
+        <Button variant="outline" className="mt-4" size="sm" onClick={props.onClick}>
+            <Trans>Remove</Trans>
+        </Button>
+    </div>)
+}

package/src/app/routes/_authenticated/_products/products.tsx

@@ -38,7 +38,7 @@ function ProductListPage() {
                     <Button asChild>
                         <Link to="./new">
                             <PlusIcon className="mr-2 h-4 w-4" />
-                            New Product
+                            <Trans>New Product</Trans>
                         </Link>
                     </Button>
                 </PermissionGuard>

package/src/app/routes/_authenticated.tsx

@@ -1,7 +1,8 @@
 import { AppLayout } from '@/components/layout/app-layout.js';
-import { createFileRoute, redirect } from '@tanstack/react-router';
+import { createFileRoute, redirect, useNavigate } from '@tanstack/react-router';
 import { AUTHENTICATED_ROUTE_PREFIX } from '@/constants.js';
 import * as React from 'react';
+import { useAuth } from '@/hooks/use-auth.js';
 
 export const Route = createFileRoute(AUTHENTICATED_ROUTE_PREFIX)({
     beforeLoad: ({ context, location }) => {
@@ -21,5 +22,15 @@ export const Route = createFileRoute(AUTHENTICATED_ROUTE_PREFIX)({
 });
 
 function AuthLayout() {
+    const navigate = useNavigate();
+    const { isAuthenticated } = useAuth();
+
+    if (!isAuthenticated) {
+        navigate({
+            to: '/login'
+        });
+        return <></>;
+    }
+
     return <AppLayout />;
 }

package/src/lib/components/data-table/add-filter-menu.tsx

@@ -0,0 +1,61 @@
+import { Button } from '@/components/ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog.js';
+import { DataTableFilterDialog } from '@/components/data-table/data-table-filter-dialog.js';
+import { Column, ColumnDef } from '@tanstack/react-table';
+import { PlusCircle } from 'lucide-react';
+import { Trans } from '@/lib/trans.js';
+import React, { useState } from 'react';
+import { camelCaseToTitleCase } from '@/lib/utils.js';
+
+export interface AddFilterMenuProps {
+    columns: Column<any, unknown>[];
+}
+
+export function AddFilterMenu({ columns }: AddFilterMenuProps) {
+    const [selectedColumn, setSelectedColumn] = useState<ColumnDef<any> | null>(null);
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+    const filterableColumns = columns.filter(column => column.getCanFilter());
+
+    return (
+        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="sm" className="h-8 border-dashed">
+                        <PlusCircle className="mr-2 h-4 w-4" />
+                        <Trans>Add filter</Trans>
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-[200px]">
+                    {filterableColumns.map(column => (
+                        <DropdownMenuItem
+                            key={column.id}
+                            onSelect={() => {
+                                setSelectedColumn(column);
+                                setIsDialogOpen(true);
+                            }}
+                        >
+                            {camelCaseToTitleCase(column.id)}
+                        </DropdownMenuItem>
+                    ))}
+                </DropdownMenuContent>
+            </DropdownMenu>
+            {selectedColumn && (
+                <DataTableFilterDialog column={selectedColumn as any} />
+            )}
+        </Dialog>
+    );
+}

package/src/lib/components/data-table/data-table-column-header.tsx

@@ -29,7 +29,6 @@ export interface DataTableColumnHeaderProps {
 export function DataTableColumnHeader({ headerContext, customConfig }: DataTableColumnHeaderProps) {
     const { column } = headerContext;
     const isSortable = column.getCanSort();
-    const isFilterable = column.getCanFilter();
 
     const customHeader = customConfig.header;
     let display = camelCaseToTitleCase(column.id);
@@ -40,7 +39,6 @@ export function DataTableColumnHeader({ headerContext, customConfig }: DataTable
     }
 
     const columSort = column.getIsSorted();
-    const columnFilter = column.getFilterValue();
     const nextSort = columSort === 'asc' ? true : columSort === 'desc' ? undefined : false;
 
     return (
@@ -57,17 +55,6 @@ export function DataTableColumnHeader({ headerContext, customConfig }: DataTable
                 </Button>
             )}
             <div>{display}</div>
-
-            {isFilterable && (
-                <Dialog>
-                    <DialogTrigger asChild>
-                        <Button size="icon-sm" variant="ghost">
-                            <Filter className={columnFilter ? '' : 'opacity-50'} />
-                        </Button>
-                    </DialogTrigger>
-                    <DataTableFilterDialog column={column} />
-                </Dialog>
-            )}
         </div>
     );
 }

package/src/lib/components/data-table/data-table-filter-badge.tsx

@@ -0,0 +1,75 @@
+import { Filter } from 'lucide-react';
+
+import { CircleX } from 'lucide-react';
+import { Badge } from '../ui/badge.js';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { ColumnDataType } from './data-table-types.js';
+import { HumanReadableOperator } from './human-readable-operator.js';
+
+export function DataTableFilterBadge({
+    filter,
+    onRemove,
+    dataType,
+    currencyCode,
+}: {
+    filter: any;
+    onRemove: (filter: any) => void;
+    dataType: ColumnDataType;
+    currencyCode: string;
+}) {
+    const [operator, value] = Object.entries(filter.value as Record<string, unknown>)[0];
+    return (
+        <Badge key={filter.id} className="flex gap-1 items-center" variant="secondary">
+            <Filter size="12" className="opacity-50" />
+            <div>{filter.id}</div>
+            <div className="text-muted-foreground"><HumanReadableOperator operator={operator} mode="short" /></div>
+            <FilterValue value={value} dataType={dataType} currencyCode={currencyCode} />
+            <button className="cursor-pointer" onClick={() => onRemove(filter)}>
+                <CircleX size="14" />
+            </button>
+        </Badge>
+    );
+}
+
+function FilterValue({ value, dataType, currencyCode }: { value: unknown, dataType: ColumnDataType, currencyCode: string }) {
+    const { formatDate, formatCurrency } = useLocalFormat();
+    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+        return Object.entries(value as Record<string, unknown>).map(([key, value]) => (
+            <div key={key} className="flex gap-1 items-center">
+                <span className="text-muted-foreground">{key}: </span>
+                <FilterValue value={value} dataType={dataType} currencyCode={currencyCode} />
+            </div>
+        ));
+    }
+    if (Array.isArray(value)) {
+        return (
+            <div className="flex gap-1 items-center">
+                [
+                {value.map(v => (
+                    <FilterValue value={v} dataType={dataType} currencyCode={currencyCode} key={v} />
+                ))}
+                ]
+            </div>
+        );
+    }
+    if (typeof value === 'string' && isDateIsoString(value)) {
+        return <div>{formatDate(value, { dateStyle: 'short', timeStyle: 'short' })}</div>;
+    }
+    if (typeof value === 'boolean') {
+        return <div>{value ? 'true' : 'false'}</div>;
+    }
+    if (typeof value === 'number' && dataType === 'Money') {
+        return <div>{formatCurrency(value, currencyCode)}</div>;
+    }
+    if (typeof value === 'number') {
+        return <div>{value}</div>;
+    }
+    if (typeof value === 'string') {
+        return <div>{value}</div>;
+    }
+    return <div>{value as string}</div>;
+}
+
+function isDateIsoString(value: string) {
+    return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/.test(value);
+}