Customizing Detail Pages

import { defineDashboardExtension } from '@vendure/dashboard';import { MarkdownEditor } from './markdown-editor';defineDashboardExtension({    detailForms: [        {            pageId: 'product-detail',            inputs: [                {                    blockId: 'main-form',                    field: 'description',                    component: MarkdownEditor,                },            ],        },    ],});

import { defineDashboardExtension } from '@vendure/dashboard';defineDashboardExtension({    detailForms: [        {            pageId: 'product-detail',            extendDetailDocument: `                query {                    product(id: $id) {                        relatedProducts {                            id                            name                            featuredAsset {                                id                                preview                            }                        }                    }                }            `,        },    ],});

import { Badge, defineDashboardExtension } from '@vendure/dashboard';defineDashboardExtension({    detailForms: [        {            pageId: 'product-detail',            extendDetailDocument: `                query {                    product(id: $id) {                        relatedProducts {                            id                            name                        }                    }                }            `,        },    ],    pageBlocks: [        {            id: 'related-products',            title: 'Related products',            location: {                pageId: 'product-detail',                column: 'side',                position: {                    blockId: 'facet-values',                    order: 'after',                },            },            component: ({ context }) => {                const relatedProducts = context.entity?.relatedProducts ?? [];                return (                    <div className="flex flex-wrap gap-1">                        {relatedProducts.map(product => (                            <Badge key={product.id} variant="secondary">                                {product.name}                            </Badge>                        ))}                    </div>                );            },        },    ],});

const { form, submitHandler, entity } = useDetailPage({    pageId: 'article-detail',    queryDocument: articleDetailDocument,    updateDocument: updateArticleDocument,    createDocument: createArticleDocument,    params: { id: params.id },    setValuesForUpdate: article => ({        id: article?.id ?? '',        title: article?.title ?? '',    }),});

import { useEffect } from 'react';import { useFormContext } from '@vendure/dashboard';export function MyPageBlock() {    const {        formState: { isSubmitSuccessful },    } = useFormContext();    useEffect(() => {        if (isSubmitSuccessful) {            console.log('The detail page form was submitted');        }    }, [isSubmitSuccessful]);}

import { useEffect } from 'react';import { Button, useFormContext } from '@vendure/dashboard';export function MyPageBlock() {    const { register, setValue } = useFormContext();    useEffect(() => {        // We register a "fake" field on the form that we only use        // to track the dirty state of this page block component        register('my-page-block-dirty-tracker');    }, [register]);    return (        <Button            onClick={() => {                // We set that "fake" field to a random value to mark the whole                // form as dirty, so the "save" button becomes enabled.                setValue('my-page-block-dirty-tracker', Math.random(), { shouldDirty: true });            }}        >            Set dirty        </Button>    );}