Merge pull request #956 from evershopcommerce/fix_shipping_note_955

fix: Shipping note is not showing on the checkout page #955

Author: treoden

packages/evershop/src/components/frontStore/checkout/ShippingNote.tsx

@@ -0,0 +1,51 @@
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle
+} from '@components/common/ui/Card.js';
+import { Textarea } from '@components/common/ui/Textarea.js';
+import { useCartState } from '@components/frontStore/cart/CartContext.js';
+import { useCheckoutDispatch } from '@components/frontStore/checkout/CheckoutContext.js';
+import { _ } from '@evershop/evershop/lib/locale/translate/_';
+import { NotebookPen } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+
+export function ShippingNote() {
+  const { updateCheckoutData } = useCheckoutDispatch();
+  const { data: cart } = useCartState();
+  const [note, setNote] = useState(cart?.shippingNote ?? '');
+
+  // This component lives outside the checkout <Form>, so it is NOT a
+  // react-hook-form field — using TextareaField here throws because
+  // useFormContext() is null. The note reaches the order purely through
+  // checkoutData: the unified checkout POST sends `checkoutData`, and the
+  // server's checkout service reads `data.note` and persists it as the cart's
+  // `shipping_note` field.
+  useEffect(() => {
+    updateCheckoutData({ note });
+  }, [note]);
+
+  return (
+    <div className="checkout-shipping-note mb-5">
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            <div className="flex items-center gap-2">
+              <NotebookPen className="w-5 h-5" />
+              <span>{_('Order Note')}</span>
+            </div>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Textarea
+            value={note}
+            onChange={(e) => setNote(e.target.value)}
+            placeholder={_('Add a note to your order')}
+            rows={3}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

packages/evershop/src/modules/checkout/pages/frontStore/checkout/Checkout.tsx

@@ -8,21 +8,26 @@ import { CheckoutProvider } from '@components/frontStore/checkout/CheckoutContex
 import { ContactInformation } from '@components/frontStore/checkout/ContactInformation.js';
 import { Payment } from '@components/frontStore/checkout/Payment.js';
 import { Shipment } from '@components/frontStore/checkout/Shipment.js';
+import { ShippingNote } from '@components/frontStore/checkout/ShippingNote.js';
+import { _ } from '@evershop/evershop/lib/locale/translate/_';
 import React from 'react';
-import './Checkout.scss';
 import { useForm } from 'react-hook-form';
-import { _ } from '@evershop/evershop/lib/locale/translate/_';
+import './Checkout.scss';
 
 interface CheckoutPageProps {
   placeOrderApi: string;
   getPaymentMethodApi: string;
   getShippingMethodApi: string;
   checkoutSuccessUrl: string;
+  setting: {
+    showShippingNote: boolean;
+  };
 }
 
 export default function CheckoutPage({
   placeOrderApi,
-  checkoutSuccessUrl
+  checkoutSuccessUrl,
+  setting: { showShippingNote }
 }: CheckoutPageProps) {
   const [disabled, setDisabled] = React.useState(false);
   const form = useForm({
@@ -54,6 +59,7 @@ export default function CheckoutPage({
           <Area id="checkoutFormAfter" noOuter />
         </Form>
         <div>
+          {showShippingNote && <ShippingNote />}
           <CartItems>
             {({ items, loading, showPriceIncludingTax }) => (
               <CartSummaryItemsList
@@ -79,5 +85,8 @@ export const query = `
   query Query {
     placeOrderApi: url(routeId: "createOrder")
     checkoutSuccessUrl: url(routeId: "checkoutSuccess")
+    setting {
+      showShippingNote
+    }
   }
 `;

packages/evershop/src/modules/checkout/services/checkout.ts

@@ -93,9 +93,14 @@ const _checkout = async function checkout(
     });
   }
 
-  // Add Note (use cart.setData)
-  if (data.note) {
-    await cart.setData('note', data.note);
+  // Add shipping note. The registered cart field is `shipping_note` (see
+  // registerCartBaseFields.js) and `orderCreator` copies it to the order's
+  // `shipping_note` column via cart.exportData(). NOTE: the key must be
+  // `shipping_note`, not `note` — DataObject.setData throws
+  // "Field note not existed" for an unregistered key, which would abort the
+  // whole order placement the moment a note is submitted.
+  if (typeof data.note === 'string') {
+    await cart.setData('shipping_note', data.note);
   }
   await saveCart(cart);
   const order = await createOrder(cart);

packages/evershop/src/types/checkoutData.ts

@@ -23,5 +23,11 @@ export interface CheckoutData {
    * surfaced as "Selected shipping method is no longer available."
    */
   shippingProvider?: string;
+  /**
+   * Free-form note the customer adds to the order on the checkout page.
+   * Persisted to the cart's `shipping_note` field, which `orderCreator`
+   * copies to the order's `shipping_note` column via cart.exportData().
+   */
+  note?: string;
   [key: string]: unknown;
 }