@base44/app-plugin-commerce 0.10.4 → 0.10.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@base44/app-plugin-commerce",
-  "version": "0.10.4",
+  "version": "0.10.5",
   "description": "Base44 Commerce plugin — entities, backend functions, shared commerce engine, admin UI and the commerce skill, shipped as copyable source",
   "keywords": [
     "base44",

package/skills/commerce/SKILL.md

@@ -119,7 +119,7 @@ Open a file when its work starts — not while planning.
 | [`references/catalog-rendering.md`](./references/catalog-rendering.md) | field shapes each catalog call returns, variant edge cases | 16K |
 | [`references/shipping-and-tax.md`](./references/shipping-and-tax.md) | zones beyond stage 03's recipe, taxes, day-2 edits | 8K |
 | [`references/online-payments.md`](./references/online-payments.md) | enabling card payments, or wiring the provider — at install or any time later | 10K |
-| [`references/storefront-ui.md`](./references/storefront-ui.md) | changing the shipped cart/drawer/checkout/order-received surfaces: props, slots, tokens, locales, restyling | 8K |
+| [`references/storefront-ui.md`](./references/storefront-ui.md) | changing the shipped cart/drawer/checkout/order-received surfaces: props, slots, tokens, locales, restyling | 9K |
 | [`references/storefront-verification.md`](./references/storefront-verification.md) | driving the storefront from a browser script | 3K |
 | [`references/reviews.md`](./references/reviews.md) | review policies (open by default; login-gated, verified buyers), moderation | 6K |
 | [`references/store-settings.md`](./references/store-settings.md) | changing store behavior through settings keys | 5K |

package/skills/commerce/references/storefront-ui.md

@@ -89,6 +89,13 @@ on those two hooks is normal and supported.
   `termsCheckbox: true` gates place-order on an accepted checkbox worded by
   `brand.termsLabel`.
 - `continueHref="/"` — where the empty state sends people.
+- `slots`: `{ afterContact(ctx), beforeSubmit(ctx), aboveSummary(ctx) }` — your
+  markup at three fixed points: `afterContact` between the address and the
+  delivery choice, `beforeSubmit` at the end of the form column, `aboveSummary`
+  above the totals. Every slot receives `{ cart, checkout, note, setNote }`.
+  `setNote` is the one way a slot puts something on the order: it writes the
+  order note, which submits as `customer_note` and shows on the receipt and in
+  the admin's order view (`place-order` accepts no other free field).
 - `onPlaced={(order) => …}` — replaces the default `/order-received` navigation.
   Advanced: the default flow already handles the card redirect and the offline
   receipt; use this only when the user explicitly wants a custom post-order flow,
@@ -151,5 +158,10 @@ element itself** (`select[data-part="control"]`, never `[data-part="control"] in
   `useProduct(...)`'s `upsells`/`crossSells` with `useCart().addItem` — one-click
   Add only for products without attributes (variants answer `400 variation_required`).
 - **B2B-ish checkout**: `sections={{ phone: "required", termsCheckbox: true, notes: true }}`.
+- **Gift wrap + gift note** (any extra field the customer fills at checkout):
+  `slots={{ beforeSubmit: ({ note, setNote }) => <GiftOptions note={note} onChange={setNote} /> }}`
+  — a checkbox and a textarea that write `"Gift wrap: yes\nGift note: …"` into
+  the note. It lands on the order as `customer_note`. Never copy
+  `CheckoutPage.jsx` to add a field.
 - **Custom thank-you flow**: keep `/order-received` mounted (payment links return
   there), add `onPlaced` only for the extra hop the user asked for.

package/src/commerce/storefront-ui/CheckoutPage.jsx

@@ -48,6 +48,11 @@ const BRAND_KEYS = {
  *   phone: "optional"|"required"|"hidden", shipToDifferent: true,
  *   termsCheckbox: false }` — `phone: "required"` is enforced by marking the
  *   field required in the address spec via requiredBillingFields.
+ * @param {object} [props.slots] `{ afterContact?(ctx), beforeSubmit?(ctx),
+ *   aboveSummary?(ctx) }` — the store's own markup at three fixed points; every
+ *   slot receives `{ cart, checkout, note, setNote }`. `setNote` is the one way
+ *   a slot puts something on the order: it writes the order note, which submits
+ *   as `customer_note` (place-order accepts no other free field).
  * @param {string} [props.continueHref="/"] where the empty state sends people.
  * @param {(order) => void} [props.onPlaced] replaces the default
  *   order-received navigation (advanced; the default flow is complete).
@@ -56,6 +61,7 @@ export function CheckoutPage({
   brand,
   layout = "two-column",
   sections = {},
+  slots = {},
   continueHref = "/",
   onPlaced,
 }) {
@@ -75,6 +81,7 @@ export function CheckoutPage({
         brand={brand}
         layout={layout}
         sections={{ ...sections, phone, shipToDifferent: allowShipToDifferent }}
+        slots={slots}
         continueHref={continueHref}
         onPlaced={onPlaced}
       />
@@ -82,7 +89,7 @@ export function CheckoutPage({
   );
 }
 
-function CheckoutBody({ brand, layout, sections, continueHref, onPlaced }) {
+function CheckoutBody({ brand, layout, sections, slots, continueHref, onPlaced }) {
   const tt = makeT(brand, BRAND_KEYS);
   const checkout = useCheckoutContext();
   const { info } = useStoreInfo();
@@ -90,6 +97,11 @@ function CheckoutBody({ brand, layout, sections, continueHref, onPlaced }) {
   const [termsAccepted, setTermsAccepted] = useState(false);
   const { coupon = "auto", notes = false, phone, shipToDifferent, termsCheckbox = false } = sections;
   const { cart, stage, blockers, canPlaceOrder, placing, orderError } = checkout;
+  const updateNote = (value) => {
+    setNote(value);
+    writeOrderNote(value);
+  };
+  const slotArgs = { cart, checkout, note, setNote: updateNote };
 
   const submit = async () => {
     const extra = note.trim() ? { customer_note: note.trim() } : {};
@@ -175,6 +187,7 @@ function CheckoutBody({ brand, layout, sections, continueHref, onPlaced }) {
               </>
             )}
           </section>
+          {slots.afterContact && slots.afterContact(slotArgs)}
 
           <ShippingMethodPicker>
             {({ methods, mustChoose, single, chosen, hint }) => (
@@ -256,17 +269,16 @@ function CheckoutBody({ brand, layout, sections, continueHref, onPlaced }) {
                 id="sfui-checkout-note"
                 value={note}
                 placeholder={tt("checkout.notes.placeholder")}
-                onChange={(e) => {
-                  setNote(e.target.value);
-                  writeOrderNote(e.target.value);
-                }}
+                onChange={(e) => updateNote(e.target.value)}
               />
             </section>
           )}
+          {slots.beforeSubmit && slots.beforeSubmit(slotArgs)}
         </div>
 
         <aside className="sfui-panel sfui-summary" aria-label={tt("checkout.summaryTitle")}>
           <h2 className="sfui-heading sfui-h2">{tt("checkout.summaryTitle")}</h2>
+          {slots.aboveSummary && slots.aboveSummary(slotArgs)}
           {couponVisible(coupon, cart, info) && <CouponField tt={tt} />}
           <TotalsBlock cart={cart} tt={tt} />
           {termsCheckbox && (