@vendure/dashboard 3.6.0-minor-202511061550 → 3.6.0-minor-202512161252

package/src/app/routes/_authenticated/_facets/facets_.$id.tsx

@@ -1,18 +1,17 @@
 import { SlugInput } from '@/vdb/components/data-input/index.js';
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
 import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
-import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
 import { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { Switch } from '@/vdb/components/ui/switch.js';
 import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import {
+    ActionBarItem,
     CustomFieldsPageBlock,
     DetailFormGrid,
     Page,
     PageActionBar,
-    PageActionBarRight,
     PageBlock,
     PageLayout,
     PageTitle,
@@ -93,16 +92,14 @@ function FacetDetailPage() {
         <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New facet</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
-                <PageActionBarRight>
-                    <PermissionGuard requires={['UpdateProduct', 'UpdateCatalog']}>
-                        <Button
-                            type="submit"
-                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
-                        >
-                            {creatingNewEntity ? <Trans>Create</Trans> : <Trans>Update</Trans>}
-                        </Button>
-                    </PermissionGuard>
-                </PageActionBarRight>
+                <ActionBarItem itemId="save-button" requiresPermission={['UpdateProduct', 'UpdateCatalog']}>
+                    <Button
+                        type="submit"
+                        disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                    >
+                        {creatingNewEntity ? <Trans>Create</Trans> : <Trans>Update</Trans>}
+                    </Button>
+                </ActionBarItem>
             </PageActionBar>
             <PageLayout>
                 <PageBlock column="side" blockId="privacy">

package/src/app/routes/_authenticated/_global-settings/global-settings.tsx

@@ -2,18 +2,17 @@ import { NumberInput } from '@/vdb/components/data-input/number-input.js';
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
 import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
 import { LanguageSelector } from '@/vdb/components/shared/language-selector.js';
-import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { Switch } from '@/vdb/components/ui/switch.js';
 import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import { extendDetailFormQuery } from '@/vdb/framework/document-extension/extend-detail-form-query.js';
 import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
 import {
+    ActionBarItem,
     CustomFieldsPageBlock,
     DetailFormGrid,
     Page,
     PageActionBar,
-    PageActionBarRight,
     PageBlock,
     PageLayout,
     PageTitle,
@@ -23,7 +22,7 @@ import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { globalSettingsDocument, updateGlobalSettingsDocument } from './global-settings.graphql.js';
-import { globalLanguageCodes } from './utils/global-languages.js';
+import { globalLanguageCodes } from '@/vdb/utils/global-languages.js';
 
 const pageId = 'global-settings';
 
@@ -92,16 +91,14 @@ function GlobalSettingsPage() {
                 <Trans>Global Settings</Trans>
             </PageTitle>
             <PageActionBar>
-                <PageActionBarRight>
-                    <PermissionGuard requires={['UpdateSettings', 'UpdateGlobalSettings']}>
-                        <Button
-                            type="submit"
-                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
-                        >
-                            <Trans>Update</Trans>
-                        </Button>
-                    </PermissionGuard>
-                </PageActionBarRight>
+                <ActionBarItem itemId="save-button" requiresPermission={['UpdateSettings', 'UpdateGlobalSettings']}>
+                    <Button
+                        type="submit"
+                        disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                    >
+                        <Trans>Update</Trans>
+                    </Button>
+                </ActionBarItem>
             </PageActionBar>
             <PageLayout>
                 <PageBlock column="main" blockId="main-form">

package/src/app/routes/_authenticated/_orders/components/add-surcharge-form.tsx

@@ -0,0 +1,139 @@
+import { AffixedInput } from '@/vdb/components/data-input/affixed-input.js';
+import { MoneyInput } from '@/vdb/components/data-input/money-input.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Form } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Switch } from '@/vdb/components/ui/switch.js';
+import { DetailFormGrid } from '@/vdb/framework/layout-engine/page-layout.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans } from '@lingui/react/macro';
+import { VariablesOf } from 'gql.tada';
+import { Plus } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { modifyOrderDocument } from '../orders.graphql.js';
+
+type ModifyOrderInput = VariablesOf<typeof modifyOrderDocument>['input'];
+type SurchargeInput = NonNullable<ModifyOrderInput['surcharges']>[number];
+
+const surchargeFormSchema = z.object({
+    description: z.string().min(1),
+    sku: z.string().optional(),
+    price: z.string().refine(val => !isNaN(Number(val)) && Number(val) > 0, {
+        message: 'Price must be a positive number',
+    }),
+    priceIncludesTax: z.boolean().default(false),
+    taxRate: z.number().nonnegative().max(100),
+    taxDescription: z.string().optional(),
+});
+
+type SurchargeFormValues = z.infer<typeof surchargeFormSchema>;
+
+export interface AddSurchargeFormProps {
+    onAddSurcharge: (surcharge: SurchargeInput) => void;
+}
+
+export function AddSurchargeForm({ onAddSurcharge }: Readonly<AddSurchargeFormProps>) {
+    const { activeChannel } = useChannel();
+
+    const surchargeForm = useForm<SurchargeFormValues>({
+        resolver: zodResolver(surchargeFormSchema),
+        mode: 'onChange',
+        defaultValues: {
+            description: '',
+            sku: '',
+            price: '0',
+            priceIncludesTax: false,
+            taxRate: 0,
+            taxDescription: '',
+        },
+    });
+
+    const taxRate = surchargeForm.watch('taxRate') || 0;
+
+    const handleAddSurcharge = () => {
+        surchargeForm.handleSubmit(values => {
+            onAddSurcharge({
+                description: values.description,
+                sku: values.sku || undefined,
+                price: Number(values.price), // already in minor units from MoneyInput
+                priceIncludesTax: values.priceIncludesTax,
+                taxRate: values.taxRate ?? undefined,
+                taxDescription: values.taxDescription || undefined,
+            });
+            surchargeForm.reset();
+        })();
+    };
+
+    return (
+        <Form {...surchargeForm}>
+            <div className="space-y-4">
+                <DetailFormGrid>
+                    <FormFieldWrapper
+                        control={surchargeForm.control}
+                        name="description"
+                        label={<Trans>Description</Trans>}
+                        render={({ field }) => <Input {...field} />}
+                    />
+                    <FormFieldWrapper
+                        control={surchargeForm.control}
+                        name="sku"
+                        label={<Trans>SKU</Trans>}
+                        render={({ field }) => <Input {...field} />}
+                    />
+                    <FormFieldWrapper
+                        control={surchargeForm.control}
+                        name="price"
+                        label={<Trans>Price</Trans>}
+                        render={({ field }) => (
+                            <MoneyInput
+                                {...field}
+                                value={Number(field.value) || 0}
+                                onChange={value => field.onChange(value.toString())}
+                                currency={activeChannel?.defaultCurrencyCode}
+                            />
+                        )}
+                    />
+                    <FormFieldWrapper
+                        control={surchargeForm.control}
+                        name="priceIncludesTax"
+                        label={<Trans>Includes tax at {taxRate}%</Trans>}
+                        render={({ field }) => (
+                            <Switch checked={field.value} onCheckedChange={field.onChange} />
+                        )}
+                    />
+                    <FormFieldWrapper
+                        control={surchargeForm.control}
+                        name="taxRate"
+                        label={<Trans>Tax rate</Trans>}
+                        render={({ field }) => (
+                            <AffixedInput
+                                {...field}
+                                type="number"
+                                suffix="%"
+                                value={field.value}
+                                onChange={e => field.onChange(e.target.valueAsNumber)}
+                            />
+                        )}
+                    />
+                    <FormFieldWrapper
+                        control={surchargeForm.control}
+                        name="taxDescription"
+                        label={<Trans>Tax description</Trans>}
+                        render={({ field }) => <Input {...field} />}
+                    />
+                </DetailFormGrid>
+                <Button
+                    type="button"
+                    onClick={handleAddSurcharge}
+                    disabled={!surchargeForm.formState.isValid}
+                >
+                    <Plus className="w-4 h-4 mr-2" />
+                    <Trans>Add surcharge</Trans>
+                </Button>
+            </div>
+        </Form>
+    );
+}

package/src/app/routes/_authenticated/_orders/components/edit-order-table.tsx

@@ -270,6 +270,9 @@ export function EditOrderTable({
                                         }}
                                         value={''}
                                         selectorLabel={<Trans>Add coupon code</Trans>}
+                                        onBlur={() => {}}
+                                        name={'couponCode'}
+                                        ref={() => {}}
                                         onChange={code => onApplyCouponCode({ couponCode: code })}
                                     />
                                 </div>

package/src/app/routes/_authenticated/_orders/components/fulfill-order-dialog.tsx

@@ -290,7 +290,9 @@ export function FulfillOrderDialog({ order, onSuccess }: Readonly<FulfillOrderDi
                                     render={({ field }) => (
                                         <ConfigurableOperationInput
                                             operationDefinition={selectedHandler}
-                                            value={field.value}
+                                            value={
+                                                field.value ?? { code: selectedHandler.code, arguments: [] }
+                                            }
                                             onChange={field.onChange}
                                             readonly={false}
                                             removable={false}

package/src/app/routes/_authenticated/_orders/components/order-address.tsx

@@ -3,8 +3,8 @@ import { ResultOf } from 'gql.tada';
 import { Globe, Phone } from 'lucide-react';
 import { orderAddressFragment } from '../orders.graphql.js';
 
-type OrderAddress = Omit<ResultOf<typeof orderAddressFragment>, 'country'> & {
-    country: string | { code: string; name: string } | null;
+type OrderAddress = Partial<Omit<ResultOf<typeof orderAddressFragment>, 'country'>> & {
+    country?: string | { code: string; name: string } | null;
 };
 
 export function OrderAddress({ address }: Readonly<{ address?: OrderAddress }>) {
@@ -19,7 +19,7 @@ export function OrderAddress({ address }: Readonly<{ address?: OrderAddress }>)
         country,
         countryCode,
         phoneNumber,
-    } = address;
+    } = address ?? {};
 
     const countryName = typeof country === 'string' ? country : country?.name;
     const countryCodeString = country && typeof country !== 'string' ? country?.code : countryCode;

package/src/app/routes/_authenticated/_orders/components/order-detail-shared.tsx

@@ -1,11 +1,11 @@
 import { CustomFieldsForm } from '@/vdb/components/shared/custom-fields-form.js';
-import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { DropdownMenuItem } from '@/vdb/components/ui/dropdown-menu.js';
+import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
 import {
+    ActionBarItem,
     Page,
     PageActionBar,
-    PageActionBarRight,
     PageBlock,
     PageLayout,
     PageTitle,
@@ -72,7 +72,9 @@ export function OrderDetailShared({
 
     const { form, submitHandler, entity, refreshEntity } = useDetailPage({
         pageId,
-        queryDocument: orderDetailDocument,
+        queryDocument: addCustomFields(orderDetailDocument, {
+            includeNestedFragments: ['OrderLine'],
+        }),
         updateDocument: setOrderCustomFieldsDocument,
         setValuesForUpdate: (entity: any) => {
             return {
@@ -154,44 +156,42 @@ export function OrderDetailShared({
     return (
         <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{titleSlot?.(entity) || <DefaultOrderTitle entity={entity} />}</PageTitle>
-            <PageActionBar>
-                <PageActionBarRight
-                    dropdownMenuItems={[
-                        ...(nextStates.includes('Modifying')
-                            ? [
-                                  {
-                                      component: () => (
-                                          <DropdownMenuItem onClick={handleModifyClick}>
-                                              <Pencil className="w-4 h-4" />
-                                              <Trans>Modify</Trans>
-                                          </DropdownMenuItem>
-                                      ),
-                                  },
-                              ]
-                            : []),
-                    ]}
-                >
-                    {showAddPaymentButton && (
-                        <PermissionGuard requires={['UpdateOrder']}>
-                            <AddManualPaymentDialog
-                                order={entity}
-                                onSuccess={() => {
-                                    refreshEntity();
-                                }}
-                            />
-                        </PermissionGuard>
-                    )}
-                    {showFulfillButton && (
-                        <PermissionGuard requires={['UpdateOrder']}>
-                            <FulfillOrderDialog
-                                order={entity}
-                                onSuccess={() => {
-                                    refreshOrderAndHistory();
-                                }}
-                            />
-                        </PermissionGuard>
-                    )}
-                </PageActionBarRight>
+            <PageActionBar
+                dropdownMenuItems={[
+                    ...(nextStates.includes('Modifying')
+                        ? [
+                              {
+                                  component: () => (
+                                      <DropdownMenuItem onClick={handleModifyClick}>
+                                          <Pencil className="w-4 h-4" />
+                                          <Trans>Modify</Trans>
+                                      </DropdownMenuItem>
+                                  ),
+                              },
+                          ]
+                        : []),
+                ]}
+            >
+                {showAddPaymentButton && (
+                    <ActionBarItem itemId="add-payment-button" requiresPermission={['UpdateOrder']}>
+                        <AddManualPaymentDialog
+                            order={entity}
+                            onSuccess={() => {
+                                refreshEntity();
+                            }}
+                        />
+                    </ActionBarItem>
+                )}
+                {showFulfillButton && (
+                    <ActionBarItem itemId="fulfill-order-button" requiresPermission={['UpdateOrder']}>
+                        <FulfillOrderDialog
+                            order={entity}
+                            onSuccess={() => {
+                                refreshOrderAndHistory();
+                            }}
+                        />
+                    </ActionBarItem>
+                )}
             </PageActionBar>
             <PageLayout>
                 {/* Main Column Blocks */}

package/src/app/routes/_authenticated/_orders/components/order-history/order-history-utils.tsx

@@ -105,7 +105,7 @@ export function orderHistoryUtils(order: OrderHistoryOrderDetail) {
 
     const getIconColor = ({ type, data }: HistoryEntryItem) => {
         const success = 'bg-success text-success-foreground';
-        const destructive = 'bg-danger text-danger-foreground';
+        const destructive = 'bg-destructive text-destructive-foreground';
         const regular = 'bg-muted text-muted-foreground';
 
         if (type === 'ORDER_PAYMENT_TRANSITION' && data.to === 'Settled') {

package/src/app/routes/_authenticated/_orders/components/order-modification-summary.tsx

@@ -1,3 +1,5 @@
+import { Money } from '@/vdb/components/data-display/money.js';
+import { Textarea } from '@/vdb/components/ui/textarea.js';
 import { Trans } from '@lingui/react/macro';
 import { ResultOf, VariablesOf } from 'gql.tada';
 import { modifyOrderDocument, orderDetailDocument } from '../orders.graphql.js';
@@ -15,6 +17,7 @@ interface OrderModificationSummaryProps {
         id: string;
         name: string;
     }>;
+    onNoteChange?: (note: string) => void;
 }
 
 interface LineAdjustment {
@@ -31,6 +34,7 @@ export function OrderModificationSummary({
     modifyOrderInput,
     addedVariants,
     eligibleShippingMethods,
+    onNoteChange,
 }: Readonly<OrderModificationSummaryProps>) {
     // Map by line id for quick lookup
     const originalLineMap = new Map(originalOrder.lines.map(line => [line.id, line]));
@@ -101,6 +105,20 @@ export function OrderModificationSummary({
             modifiedShippingMethodId;
     }
 
+    // Added surcharges
+    const addedSurcharges = modifyOrderInput.surcharges ?? [];
+
+    const hasNoModifications =
+        adjustedLines.length === 0 &&
+        addedLines.length === 0 &&
+        removedLines.length === 0 &&
+        addedCouponCodes.length === 0 &&
+        removedCouponCodes.length === 0 &&
+        addedSurcharges.length === 0 &&
+        !modifyOrderInput.updateShippingAddress &&
+        !modifyOrderInput.updateBillingAddress &&
+        !shippingMethodChanged;
+
     return (
         <div className="text-sm">
             {/* Address changes */}
@@ -206,18 +224,38 @@ export function OrderModificationSummary({
                     </ul>
                 </div>
             )}
-            {adjustedLines.length === 0 &&
-                addedLines.length === 0 &&
-                removedLines.length === 0 &&
-                addedCouponCodes.length === 0 &&
-                removedCouponCodes.length === 0 &&
-                !modifyOrderInput.updateShippingAddress &&
-                !modifyOrderInput.updateBillingAddress &&
-                !shippingMethodChanged && (
-                    <div className="text-muted-foreground">
-                        <Trans>No modifications made</Trans>
+            {addedSurcharges.length > 0 && (
+                <div className="mb-2">
+                    <div className="font-medium">
+                        <Trans>Adding {addedSurcharges.length} surcharge(s)</Trans>
                     </div>
-                )}
+                    <ul className="list-disc ml-4">
+                        {addedSurcharges.map((surcharge, index) => (
+                            <li key={`surcharge-${index}`}>
+                                <div className="flex items-center gap-1">
+                                    <span>{surcharge.description}:</span>
+                                    <Money value={surcharge.price} currency={originalOrder.currencyCode} />
+                                </div>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            )}
+            {hasNoModifications && (
+                <div className="text-muted-foreground">
+                    <Trans>No modifications made</Trans>
+                </div>
+            )}
+            <div className="mb-4 mt-4">
+                <div className="font-medium mb-2">
+                    <Trans>Note</Trans>
+                </div>
+                <Textarea
+                    disabled={hasNoModifications}
+                    value={modifyOrderInput.note ?? ''}
+                    onChange={e => onNoteChange?.(e.target.value)}
+                />
+            </div>
         </div>
     );
 }

package/src/app/routes/_authenticated/_orders/components/order-table.tsx

@@ -147,7 +147,10 @@ export function OrderTable({ order, pageId }: Readonly<OrderTableProps>) {
     ];
     const currencyCode = order.currencyCode;
 
-    const fields = getFieldsFromDocumentNode(addCustomFields(orderDetailDocument), ['order', 'lines']);
+    const fields = getFieldsFromDocumentNode(
+        addCustomFields(orderDetailDocument, { includeNestedFragments: ['OrderLine'] }),
+        ['order', 'lines'],
+    );
 
     const customizeColumns = useMemo(() => createCustomizeColumns(currencyCode), [currencyCode]);
 

package/src/app/routes/_authenticated/_orders/components/use-transition-order-to-state.tsx

@@ -22,8 +22,7 @@ import { orderHistoryDocument, transitionOrderToStateDocument } from '../orders.
  */
 export function useTransitionOrderToState(orderId: string | undefined) {
     const [selectStateOpen, setSelectStateOpen] = useState(false);
-    const [onSuccessFn, setOnSuccessFn] = useState<() => void>(() => {
-    });
+    const [onSuccessFn, setOnSuccessFn] = useState<() => void>(() => {});
     const { data, isLoading, error } = useQuery({
         queryKey: ['orderPreModifyingState', orderId],
         queryFn: async () => {
@@ -142,7 +141,7 @@ export function useTransitionOrderToState(orderId: string | undefined) {
         transitionToPreModifyingState,
         transitionToState,
         ManuallySelectNextState,
-        selectNextState: ({ onSuccess }: { onSuccess?: () => void }) => {
+        selectNextState: ({ onSuccess }: { onSuccess?: () => void | Promise<void> }) => {
             setSelectStateOpen(true);
             if (onSuccess) {
                 setOnSuccessFn(() => onSuccess);

package/src/app/routes/_authenticated/_orders/orders.tsx

@@ -5,7 +5,7 @@ import {
     OrderStateCell,
 } 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 { ActionBarItem } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
 import { api } from '@/vdb/graphql/api.js';
 import { ResultOf } from '@/vdb/graphql/graphql.js';
@@ -109,12 +109,12 @@ function OrderListPage() {
                 },
             }}
         >
-            <PageActionBarRight>
+            <ActionBarItem itemId="create-draft-button">
                 <Button onClick={() => createDraftOrder({})}>
                     <PlusIcon className="mr-2 h-4 w-4" />
                     <Trans>Draft order</Trans>
                 </Button>
-            </PageActionBarRight>
+            </ActionBarItem>
         </ListPage>
     );
 }

package/src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx

@@ -1,9 +1,9 @@
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import {
+    ActionBarItem,
     Page,
     PageActionBar,
-    PageActionBarRight,
     PageBlock,
     PageLayout,
     PageTitle,
@@ -16,6 +16,7 @@ import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
 import { User } from 'lucide-react';
 import { useState } from 'react';
 import { toast } from 'sonner';
+import { AddSurchargeForm } from './components/add-surcharge-form.js';
 import { CustomerAddressSelector } from './components/customer-address-selector.js';
 import { EditOrderTable } from './components/edit-order-table.js';
 import { OrderAddress } from './components/order-address.js';
@@ -83,6 +84,8 @@ function ModifyOrderPage() {
         removeCouponCode,
         updateShippingAddress: updateShippingAddressInInput,
         updateBillingAddress: updateBillingAddressInInput,
+        addSurcharge,
+        setNote,
         hasModifications,
     } = useModifyOrder(entity);
 
@@ -159,11 +162,11 @@ function ModifyOrderPage() {
                 <Trans>Modify order</Trans>
             </PageTitle>
             <PageActionBar>
-                <PageActionBarRight>
+                <ActionBarItem itemId="cancel-modification-button">
                     <Button type="button" variant="secondary" onClick={handleCancelModificationClick}>
                         <Trans>Cancel modification</Trans>
                     </Button>
-                </PageActionBarRight>
+                </ActionBarItem>
             </PageActionBar>
             <PageLayout>
                 <PageBlock column="main" blockId="order-lines" title={<Trans>Order lines</Trans>}>
@@ -181,6 +184,11 @@ function ModifyOrderPage() {
                         displayTotals={false}
                     />
                 </PageBlock>
+
+                <PageBlock column="main" blockId="add-surcharge" title={<Trans>Add surcharge</Trans>}>
+                    <AddSurchargeForm onAddSurcharge={addSurcharge} />
+                </PageBlock>
+
                 <PageBlock
                     column="side"
                     blockId="modification-summary"
@@ -196,6 +204,7 @@ function ModifyOrderPage() {
                                 name: m.name,
                             })) ?? []
                         }
+                        onNoteChange={setNote}
                     />
                     <div className="mt-4 flex justify-end">
                         <Button