@velastack/cms 0.6.5 → 0.7.0

package/README.md

@@ -465,6 +465,46 @@ The same form, but a submission opens a WhatsApp chat to the editor's number wit
 
 The chat opens in a new tab (this one, if the popup is blocked), and `redirect` then moves this tab on. Without JavaScript the form posts normally, so the answers are still stored; `form.whatsappHref` links to the number alone for a `<noscript>` fallback. `CmsFormFields` works inside it as in `CmsForm`.
 
+### `<CmsWhatsAppCart>` and `whatsappCart`
+
+A cart whose checkout is a WhatsApp chat. Visitors add items with `whatsappCart.add(...)`, kept in the browser. The checkout form asks for `name`, `phone` and an optional `note`, then opens a chat to the editor's number with the order as the message. It also records the order (reference, customer, lines, subtotal and message) to the hosted form `key`, so the order is kept even if the chat is never sent. Nothing is paid on the site: the business confirms and takes payment in the chat.
+
+```svelte
+<script lang="ts">
+	import { CmsWhatsAppCart, whatsappCart } from '@velastack/cms';
+</script>
+
+<button onclick={() => whatsappCart.add({ id: 'concha', name: 'Concha', price: 12 })}>
+	Add to order
+</button>
+
+<CmsWhatsAppCart key="order" name="whatsapp" scope="root">
+	{#snippet children({ cart, placed, formatPrice })}
+		{#if placed}
+			<p>Order {placed.ref} opened in WhatsApp.</p>
+			<a href={placed.href} target="_blank" rel="noopener">Open WhatsApp again</a>
+			<button type="button" onclick={() => cart.clear()}>Done</button>
+		{:else}
+			{#each cart.items as item (item.id)}
+				<p>{item.quantity} × {item.name}</p>
+			{/each}
+			{#if cart.subtotal !== undefined}<p>{formatPrice(cart.subtotal)}</p>{/if}
+			<label>Name <input name="name" required /></label>
+			<label>Phone <input name="phone" type="tel" required /></label>
+			<label>Note <textarea name="note"></textarea></label>
+			<button disabled={cart.count === 0}>Order on WhatsApp</button>
+		{/if}
+	{/snippet}
+</CmsWhatsAppCart>
+```
+
+- **One currency, the business's own.** Every price is in it, and the order and message are too. It comes from the `currency` site option (declare it in `createCms({ site })`), or the `currency` prop. `formatPrice` formats an amount in the page's language, so an English page shows MXN as `MX$5.50` and a Spanish one as `$5.50`.
+- **Prices are optional**, and written as an editor types them (`4.5`). `cart.subtotal` exists only when every item has a price; otherwise the business quotes the total in the chat.
+- **The message is the editor's**, set from the pencil like `CmsWhatsAppForm`'s, with `{ref}`, `{items}`, `{total}`, `{name}`, `{phone}` and `{note}`. Until one is set, a default lists the items, the total and the customer. Lines an empty placeholder leaves blank are dropped.
+- **After checkout**, `placed` holds the order's reference and chat link until `cart.clear()`. Adding an item starts the next order.
+- **The cart lives in the browser**, so the server renders it empty. `CmsWhatsAppCart` loads it on mount; a count shown elsewhere can call `whatsappCart.load()` in its own `onMount`.
+- Declare the `order` form in `template.json` `forms`, as for `contact`. The links, references and recording come from [`@velastack/whatsapp`](https://github.com/velastack/whatsapp).
+
 ## Custom CMS components
 
 VelaStack CMS discovers your custom or third-party CMS components by convention.

package/dist/components/cms/cms-whatsapp-cart.svelte

@@ -0,0 +1,202 @@
+<script lang="ts" module>
+	import type { CmsFormState } from './cms-form.svelte';
+	import type { WhatsAppPlacedOrder } from './whatsapp-cart.svelte.js';
+	import { whatsappCart } from './whatsapp-cart.svelte.js';
+
+	export type CmsWhatsAppCartState = CmsFormState & {
+		/** The cart: its items, count and subtotal, and the methods that change them. */
+		readonly cart: typeof whatsappCart;
+		/** The order last sent to WhatsApp, until `cart.clear()`. */
+		readonly placed: WhatsAppPlacedOrder | null;
+		/** An amount in the site's currency, formatted in the page's language. */
+		formatPrice: (amount: number) => string;
+	};
+</script>
+
+<script lang="ts">
+	/**
+	 * `CmsWhatsAppCart`: checkout for `whatsappCart`. The template's form
+	 * asks for `name`, `phone` and an optional `note`; submitting turns the
+	 * cart into the editor's message (`{ref}`, `{items}`, `{total}`, `{name}`,
+	 * `{phone}`, `{note}`), opens it in WhatsApp to the editor's number, and
+	 * records the order to the hosted form `key` in the background, so it is
+	 * kept even if the visitor never sends the chat.
+	 *
+	 * The chat opens inside the submit handler, before the post settles: a
+	 * popup opened after an `await` loses the click's user activation and is
+	 * blocked. If it is blocked anyway, this tab goes to WhatsApp instead.
+	 *
+	 * The template draws the cart itself: items, quantities and add buttons
+	 * call `whatsappCart`, and `children` gets the cart and how checkout went.
+	 */
+	import { onMount, type Snippet } from 'svelte';
+	import type { HTMLFormAttributes } from 'svelte/elements';
+	import {
+		fillMessage,
+		formatMoney,
+		openChat,
+		orderPlaceholders,
+		orderRef,
+		orderSubtotal,
+		recordOrder,
+		whatsappHref,
+		type Order
+	} from '@velastack/whatsapp';
+	import Structured from './cms-structured.svelte';
+	import FormControls from './cms-form-controls.svelte';
+	import { cms, cmsStore } from './cms-store.svelte.js';
+	import { useFormTarget, type FormStatus } from './use-form-target.svelte.js';
+	import { setWhatsAppFieldNames } from './cms-whatsapp-form.svelte';
+	import { cmsWhatsApp, type CmsWhatsAppValue } from '../../core/shapes/whatsapp.js';
+	import {
+		DEFAULT_ORDER_MESSAGE,
+		ORDER_PLACEHOLDERS,
+		tidyMessage
+	} from '../../core/forms/order-message.js';
+
+	type Props = Omit<HTMLFormAttributes, 'action' | 'method' | 'children'> & {
+		/** The CMS field holding the number and message. */
+		name: string;
+		scope?: string;
+		fallback?: Partial<CmsWhatsAppValue>;
+		value?: unknown;
+		/** The hosted form to record each order to, as the template manifest declares it. */
+		key?: string;
+		/** Record to this route instead. */
+		action?: string;
+		/**
+		 * ISO 4217: the business's currency, which every price is in. Defaults
+		 * to the `currency` site option.
+		 */
+		currency?: string;
+		children: Snippet<[CmsWhatsAppCartState]>;
+	};
+	let {
+		name,
+		scope,
+		fallback,
+		value,
+		key,
+		action,
+		currency,
+		children: content,
+		...rest
+	}: Props = $props();
+
+	$effect.pre(() => {
+		const fromSite = cms.site.currency;
+		whatsappCart.currency =
+			currency ?? (typeof fromSite === 'string' ? fromSite.trim().toUpperCase() : '');
+	});
+
+	// The page's language, not the browser's: an English page shows MXN as
+	// `MX$5.50`, a Spanish one as `$5.50`.
+	const pageLocale = () =>
+		(typeof document !== 'undefined' && document.documentElement.lang) || undefined;
+
+	const target = useFormTarget(() => ({ key, action }));
+	setWhatsAppFieldNames(() => ORDER_PLACEHOLDERS);
+
+	let status = $state<FormStatus>('idle');
+	let message = $state<string | null>(null);
+
+	const cartState: CmsWhatsAppCartState = {
+		get status() {
+			return status;
+		},
+		get message() {
+			return message;
+		},
+		data: null,
+		cart: whatsappCart,
+		get placed() {
+			return whatsappCart.placed;
+		},
+		formatPrice: (amount) => formatMoney(amount, whatsappCart.currency, pageLocale())
+	};
+
+	// The cart lives in the browser, so the server renders it empty and it
+	// fills in here.
+	onMount(() => whatsappCart.load());
+
+	const field = (body: FormData, name: string) => {
+		const value = body.get(name);
+		return typeof value === 'string' ? value.trim() : '';
+	};
+
+	const record = (order: Order, text: string, gotcha: string) => {
+		if (!target.url) {
+			status = 'success';
+			return;
+		}
+		status = 'submitting';
+		recordOrder(target.url, order, { message: text, token: target.token, gotcha })
+			.then(async (res) => {
+				status = res.ok ? 'success' : 'failure';
+				if (!res.ok) message = ((await res.json().catch(() => null))?.message as string) ?? null;
+			})
+			.catch(() => {
+				status = 'error';
+			});
+	};
+
+	const submit = (event: SubmitEvent, settings: CmsWhatsAppValue) => {
+		event.preventDefault();
+		if (cmsStore.isEditing) return;
+		message = null;
+		if (whatsappCart.items.length === 0) {
+			status = 'error';
+			message = 'The cart is empty.';
+			return;
+		}
+		const body = new FormData(event.currentTarget as HTMLFormElement, event.submitter);
+		if (!whatsappCart.currency) {
+			status = 'error';
+			message = 'No currency is set.';
+			return;
+		}
+		const lines = whatsappCart.items.map(({ name, quantity, price }) => ({
+			name,
+			quantity,
+			price
+		}));
+		const order: Order = {
+			ref: orderRef(),
+			name: field(body, 'name'),
+			phone: field(body, 'phone'),
+			note: field(body, 'note') || undefined,
+			currency: whatsappCart.currency,
+			lines,
+			subtotal: orderSubtotal(lines, whatsappCart.currency)
+		};
+		const text = tidyMessage(
+			fillMessage(settings.message || DEFAULT_ORDER_MESSAGE, orderPlaceholders(order, pageLocale()))
+		);
+		const href = whatsappHref(settings.number, text);
+		if (!href) {
+			status = 'error';
+			message = 'No WhatsApp number is set.';
+			return;
+		}
+		record(order, text, field(body, '_gotcha'));
+		openChat(href);
+		whatsappCart.place({ ref: order.ref, href });
+	};
+</script>
+
+<Structured
+	schema={cmsWhatsApp}
+	{name}
+	{scope}
+	{fallback}
+	{value}
+	view={(settings) => settings}
+	editable={() => import('./cms-whatsapp-form-editable.svelte')}
+>
+	{#snippet children(settings)}
+		<form {...rest} method="POST" action={target.url} onsubmit={(event) => submit(event, settings)}>
+			<FormControls token={target.token} />
+			{@render content(cartState)}
+		</form>
+	{/snippet}
+</Structured>

package/dist/components/cms/cms-whatsapp-cart.svelte.d.ts

@@ -0,0 +1,49 @@
+import type { CmsFormState } from './cms-form.svelte';
+import type { WhatsAppPlacedOrder } from './whatsapp-cart.svelte.js';
+import { whatsappCart } from './whatsapp-cart.svelte.js';
+export type CmsWhatsAppCartState = CmsFormState & {
+    /** The cart: its items, count and subtotal, and the methods that change them. */
+    readonly cart: typeof whatsappCart;
+    /** The order last sent to WhatsApp, until `cart.clear()`. */
+    readonly placed: WhatsAppPlacedOrder | null;
+    /** An amount in the site's currency, formatted in the page's language. */
+    formatPrice: (amount: number) => string;
+};
+/**
+     * `CmsWhatsAppCart`: checkout for `whatsappCart`. The template's form
+     * asks for `name`, `phone` and an optional `note`; submitting turns the
+     * cart into the editor's message (`{ref}`, `{items}`, `{total}`, `{name}`,
+     * `{phone}`, `{note}`), opens it in WhatsApp to the editor's number, and
+     * records the order to the hosted form `key` in the background, so it is
+     * kept even if the visitor never sends the chat.
+     *
+     * The chat opens inside the submit handler, before the post settles: a
+     * popup opened after an `await` loses the click's user activation and is
+     * blocked. If it is blocked anyway, this tab goes to WhatsApp instead.
+     *
+     * The template draws the cart itself: items, quantities and add buttons
+     * call `whatsappCart`, and `children` gets the cart and how checkout went.
+     */
+import { type Snippet } from 'svelte';
+import type { HTMLFormAttributes } from 'svelte/elements';
+import { type CmsWhatsAppValue } from '../../core/shapes/whatsapp.js';
+type Props = Omit<HTMLFormAttributes, 'action' | 'method' | 'children'> & {
+    /** The CMS field holding the number and message. */
+    name: string;
+    scope?: string;
+    fallback?: Partial<CmsWhatsAppValue>;
+    value?: unknown;
+    /** The hosted form to record each order to, as the template manifest declares it. */
+    key?: string;
+    /** Record to this route instead. */
+    action?: string;
+    /**
+     * ISO 4217: the business's currency, which every price is in. Defaults
+     * to the `currency` site option.
+     */
+    currency?: string;
+    children: Snippet<[CmsWhatsAppCartState]>;
+};
+declare const CmsWhatsappCart: import("svelte").Component<Props, {}, "">;
+type CmsWhatsappCart = ReturnType<typeof CmsWhatsappCart>;
+export default CmsWhatsappCart;

package/dist/components/cms/cms-whatsapp-form.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
 	/** `CmsWhatsAppForm`: a form whose answers open a prefilled WhatsApp chat. */
-	import { getContext } from 'svelte';
+	import { getContext, setContext } from 'svelte';
 	import { isControlField } from '../../core/forms/target.js';
 	import type { CmsFormState } from './cms-form.svelte';
 
@@ -17,6 +17,11 @@
 	export const getWhatsAppFieldNames = (): (() => string[]) =>
 		getContext<() => string[]>(FIELD_NAMES) ?? (() => []);
 
+	/** What a form fills its message from, for the settings editor to list. */
+	export const setWhatsAppFieldNames = (names: () => string[]): void => {
+		setContext(FIELD_NAMES, names);
+	};
+
 	const fieldNames = (form: HTMLFormElement): string[] => {
 		const names = new Set<string>();
 		for (const el of form.elements) {
@@ -44,14 +49,14 @@
 	 * stored and `redirect` applies; `whatsappHref` is there for a
 	 * `<noscript>` link.
 	 */
-	import { setContext, type Snippet } from 'svelte';
+	import type { Snippet } from 'svelte';
 	import type { HTMLFormAttributes } from 'svelte/elements';
 	import Structured from './cms-structured.svelte';
 	import FormControls from './cms-form-controls.svelte';
 	import { cmsStore } from './cms-store.svelte.js';
 	import { followRedirect, useFormTarget, type FormStatus } from './use-form-target.svelte.js';
 	import { cmsWhatsApp, type CmsWhatsAppValue } from '../../core/shapes/whatsapp.js';
-	import { fillMessage, whatsappHref } from '../../core/forms/whatsapp.js';
+	import { fillMessage, openChat, whatsappHref } from '@velastack/whatsapp';
 
 	type Props = Omit<HTMLFormAttributes, 'action' | 'method' | 'children'> & {
 		/** The CMS field holding the number and message. */
@@ -82,7 +87,7 @@
 	const target = useFormTarget(() => ({ key, action }));
 
 	let formEl = $state<HTMLFormElement>();
-	setContext(FIELD_NAMES, () => (formEl ? fieldNames(formEl) : []));
+	setWhatsAppFieldNames(() => (formEl ? fieldNames(formEl) : []));
 
 	let status = $state<FormStatus>('idle');
 	let message = $state<string | null>(null);
@@ -133,12 +138,7 @@
 			message = 'No WhatsApp number is set.';
 			return;
 		}
-		const chat = window.open(href, '_blank');
-		if (!chat) {
-			location.assign(href);
-			return;
-		}
-		chat.opener = null;
+		if (!openChat(href)) return;
 		if (redirect) void followRedirect(redirect);
 	};
 </script>

package/dist/components/cms/cms-whatsapp-form.svelte.d.ts

@@ -6,6 +6,8 @@ export type CmsWhatsAppFormState = CmsFormState & {
 };
 /** For the settings editor: the `{placeholders}` this form's inputs provide. */
 export declare const getWhatsAppFieldNames: () => (() => string[]);
+/** What a form fills its message from, for the settings editor to list. */
+export declare const setWhatsAppFieldNames: (names: () => string[]) => void;
 /**
      * Like `CmsForm`, but a submission opens `wa.me` with the editor's
      * message (answers substituted for `{field}` placeholders) addressed to
@@ -21,7 +23,7 @@ export declare const getWhatsAppFieldNames: () => (() => string[]);
      * stored and `redirect` applies; `whatsappHref` is there for a
      * `<noscript>` link.
      */
-import { type Snippet } from 'svelte';
+import type { Snippet } from 'svelte';
 import type { HTMLFormAttributes } from 'svelte/elements';
 import { type CmsWhatsAppValue } from '../../core/shapes/whatsapp.js';
 type Props = Omit<HTMLFormAttributes, 'action' | 'method' | 'children'> & {

package/dist/components/cms/whatsapp-cart.svelte.d.ts

@@ -0,0 +1,46 @@
+/**
+ * The cart a `CmsWhatsAppCart` checks out: items kept in the browser, which
+ * checkout turns into a WhatsApp message to the business. Nothing is paid on
+ * the site, so what is stored is what the visitor asked for, not a price.
+ *
+ * Module state, filled from localStorage by `load()` in the browser only, so
+ * the server renders an empty cart and hydration agrees. Its methods run from
+ * event handlers, never during a server render.
+ */
+import { type OrderLine } from '@velastack/whatsapp';
+/** A line in the cart; its `price` is in the site's currency. */
+export type WhatsAppCartItem = OrderLine & {
+    /** The template's id for the item (a slug); lines with the same id merge. */
+    id: string;
+};
+/** An order sent to WhatsApp, kept until the visitor says they're done. */
+export type WhatsAppPlacedOrder = {
+    ref: string;
+    /** The chat link, to open it again. */
+    href: string;
+};
+declare class WhatsAppCart {
+    #private;
+    items: WhatsAppCartItem[];
+    /** For the template's drawer or sheet, if it has one. */
+    open: boolean;
+    placed: WhatsAppPlacedOrder | null;
+    count: number;
+    /**
+     * The currency every price is in: the business's own. `CmsWhatsAppCart`
+     * sets it from its `currency` prop or the `currency` site option.
+     */
+    currency: string;
+    /** Only when every item has a price; otherwise the business quotes. */
+    subtotal: number | undefined;
+    /** Reads the saved cart, once, in the browser. Safe to call from any component's mount. */
+    load(): void;
+    add(item: Omit<WhatsAppCartItem, 'quantity'>, quantity?: number): void;
+    /** A quantity of 0 removes the item. */
+    setQuantity(id: string, quantity: number): void;
+    remove(id: string): void;
+    place(order: WhatsAppPlacedOrder): void;
+    clear(): void;
+}
+export declare const whatsappCart: WhatsAppCart;
+export {};

package/dist/components/cms/whatsapp-cart.svelte.js

@@ -0,0 +1,86 @@
+/**
+ * The cart a `CmsWhatsAppCart` checks out: items kept in the browser, which
+ * checkout turns into a WhatsApp message to the business. Nothing is paid on
+ * the site, so what is stored is what the visitor asked for, not a price.
+ *
+ * Module state, filled from localStorage by `load()` in the browser only, so
+ * the server renders an empty cart and hydration agrees. Its methods run from
+ * event handlers, never during a server render.
+ */
+import { orderSubtotal } from '@velastack/whatsapp';
+const STORAGE_KEY = 'vela-cms:whatsapp-cart';
+class WhatsAppCart {
+    items = $state([]);
+    /** For the template's drawer or sheet, if it has one. */
+    open = $state(false);
+    placed = $state(null);
+    count = $derived(this.items.reduce((total, item) => total + item.quantity, 0));
+    /**
+     * The currency every price is in: the business's own. `CmsWhatsAppCart`
+     * sets it from its `currency` prop or the `currency` site option.
+     */
+    currency = $state('');
+    /** Only when every item has a price; otherwise the business quotes. */
+    subtotal = $derived(this.currency ? orderSubtotal(this.items, this.currency) : undefined);
+    #loaded = false;
+    /** Reads the saved cart, once, in the browser. Safe to call from any component's mount. */
+    load() {
+        if (typeof localStorage === 'undefined' || this.#loaded)
+            return;
+        this.#loaded = true;
+        try {
+            const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '{}');
+            if (Array.isArray(saved?.items))
+                this.items = saved.items;
+            if (saved?.placed)
+                this.placed = saved.placed;
+        }
+        catch {
+            // Unreadable or blocked storage starts an empty cart.
+        }
+    }
+    add(item, quantity = 1) {
+        this.load();
+        // Adding after an order was sent starts the next one.
+        if (this.placed)
+            this.clear();
+        const line = this.items.find((line) => line.id === item.id);
+        if (line)
+            line.quantity += quantity;
+        else
+            this.items.push({ ...item, quantity });
+        this.#save();
+    }
+    /** A quantity of 0 removes the item. */
+    setQuantity(id, quantity) {
+        if (quantity <= 0)
+            return this.remove(id);
+        const line = this.items.find((line) => line.id === id);
+        if (!line)
+            return;
+        line.quantity = quantity;
+        this.#save();
+    }
+    remove(id) {
+        this.items = this.items.filter((line) => line.id !== id);
+        this.#save();
+    }
+    place(order) {
+        this.placed = order;
+        this.#save();
+    }
+    clear() {
+        this.items = [];
+        this.placed = null;
+        this.#save();
+    }
+    #save() {
+        try {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify({ items: $state.snapshot(this.items), placed: this.placed }));
+        }
+        catch {
+            // Storage can be full or blocked; the cart still works for this visit.
+        }
+    }
+}
+export const whatsappCart = new WhatsAppCart();

package/dist/core/forms/order-message.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The message a `CmsWhatsAppCart` sends: the editor's template, filled from
+ * the order by `@velastack/whatsapp`'s `orderPlaceholders`.
+ */
+/** The `{placeholders}` an order message can use. */
+export declare const ORDER_PLACEHOLDERS: string[];
+/** Until the editor writes one. Lines left empty (no total, no note) are dropped. */
+export declare const DEFAULT_ORDER_MESSAGE = "Hi! I'd like to place an order ({ref}):\n\n{items}\n\n{total}\n\n{name} \u00B7 {phone}\n{note}";
+/** Drops the blank lines and dangling spaces that empty placeholders leave behind. */
+export declare const tidyMessage: (message: string) => string;

package/dist/core/forms/order-message.js

@@ -0,0 +1,13 @@
+/**
+ * The message a `CmsWhatsAppCart` sends: the editor's template, filled from
+ * the order by `@velastack/whatsapp`'s `orderPlaceholders`.
+ */
+/** The `{placeholders}` an order message can use. */
+export const ORDER_PLACEHOLDERS = ['ref', 'items', 'total', 'name', 'phone', 'note'];
+/** Until the editor writes one. Lines left empty (no total, no note) are dropped. */
+export const DEFAULT_ORDER_MESSAGE = "Hi! I'd like to place an order ({ref}):\n\n{items}\n\n{total}\n\n{name} · {phone}\n{note}";
+/** Drops the blank lines and dangling spaces that empty placeholders leave behind. */
+export const tidyMessage = (message) => message
+    .replace(/[ \t]+$/gm, '')
+    .replace(/\n{3,}/g, '\n\n')
+    .trim();

package/dist/core/forms/target.d.ts

@@ -1,3 +1,9 @@
-export declare const hostedFormUrl: (endpoint: string, key: string) => string | null;
+/**
+ * Where a form posts when the template names a hosted form by `key`:
+ * velastack.dev serves a project's hosted forms beside its CMS, at
+ * `/v1/projects/<id>/forms/<key>`. Any other endpoint shape has no hosted
+ * forms, so `hostedFormUrl` gives `null` and the template passes `action`.
+ */
+export { hostedFormUrl } from '@velastack/whatsapp';
 /** Fields a form carries for the endpoint rather than the submission. */
 export declare const isControlField: (name: string) => boolean;

package/dist/core/forms/target.js

@@ -1,16 +1,9 @@
 /**
- * Where a form posts when the template names a hosted form by `key`.
- *
- * velastack.dev serves a project's CMS at `/v1/projects/<id>/cms` and its
- * hosted forms beside it at `/v1/projects/<id>/forms/<key>`, the forms a
- * template's manifest declares. Any other endpoint shape (a same-app
- * `/api/cms`, this package's own `/cms` backend) has no hosted forms, so
- * there is nothing to derive and the template passes `action` instead.
+ * Where a form posts when the template names a hosted form by `key`:
+ * velastack.dev serves a project's hosted forms beside its CMS, at
+ * `/v1/projects/<id>/forms/<key>`. Any other endpoint shape has no hosted
+ * forms, so `hostedFormUrl` gives `null` and the template passes `action`.
  */
-const HOSTED_CMS = /^(.*\/v1\/projects\/[^/?#]+)\/cms\/?$/;
-export const hostedFormUrl = (endpoint, key) => {
-    const match = HOSTED_CMS.exec(endpoint);
-    return match ? `${match[1]}/forms/${encodeURIComponent(key)}` : null;
-};
+export { hostedFormUrl } from '@velastack/whatsapp';
 /** Fields a form carries for the endpoint rather than the submission. */
 export const isControlField = (name) => name.startsWith('_');

package/dist/index.d.ts

@@ -36,6 +36,10 @@ export type { CmsFormState, CmsFormStatus } from './components/cms/cms-form.svel
 export { default as CmsFormFields } from './components/cms/cms-form-fields.svelte';
 export { default as CmsWhatsAppForm } from './components/cms/cms-whatsapp-form.svelte';
 export type { CmsWhatsAppFormState } from './components/cms/cms-whatsapp-form.svelte';
+export { default as CmsWhatsAppCart } from './components/cms/cms-whatsapp-cart.svelte';
+export type { CmsWhatsAppCartState } from './components/cms/cms-whatsapp-cart.svelte';
+export { whatsappCart } from './components/cms/whatsapp-cart.svelte.js';
+export type { WhatsAppCartItem, WhatsAppPlacedOrder } from './components/cms/whatsapp-cart.svelte.js';
 export * from './core/shapes/index.js';
 export { default as AdminBar } from './components/admin-bar/admin-bar.svelte';
 export { useCmsField, resolveScopeRef, ROOT_SCOPE_ID } from './components/cms/use-cms-field.svelte.js';

package/dist/index.js

@@ -39,6 +39,8 @@ export { default as CmsSchedule } from './components/cms/cms-schedule.svelte';
 export { default as CmsForm } from './components/cms/cms-form.svelte';
 export { default as CmsFormFields } from './components/cms/cms-form-fields.svelte';
 export { default as CmsWhatsAppForm } from './components/cms/cms-whatsapp-form.svelte';
+export { default as CmsWhatsAppCart } from './components/cms/cms-whatsapp-cart.svelte';
+export { whatsappCart } from './components/cms/whatsapp-cart.svelte.js';
 export * from './core/shapes/index.js';
 // Admin bar (sync wrapper; admin-bar-internal + seo-panel are async chunks)
 export { default as AdminBar } from './components/admin-bar/admin-bar.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@velastack/cms",
-	"version": "0.6.5",
+	"version": "0.7.0",
 	"description": "A scope-aware CMS for SvelteKit, for static or dynamic sites.",
 	"keywords": [
 		"svelte",
@@ -126,6 +126,7 @@
 		"@tiptap/extension-link": "^3.30.6",
 		"@tiptap/pm": "^3.30.6",
 		"@tiptap/starter-kit": "^3.30.6",
+		"@velastack/whatsapp": "^0.1.0",
 		"bits-ui": "^2.19.0",
 		"devalue": "^6.0.0",
 		"tailwind-merge": "^3.6.0"

package/dist/core/forms/whatsapp.d.ts

@@ -1,18 +0,0 @@
-/**
- * Building the `wa.me` link a `CmsWhatsAppForm` opens: the editor's format
- * string with the visitor's answers substituted, sent to the editor's number.
- */
-/**
- * Substitute `{field}` placeholders with the submitted values. A field sent
- * more than once (checkboxes, multi-selects) joins with commas; a placeholder
- * with no matching field, and file uploads, become empty.
- */
-export declare const fillMessage: (template: string, data: FormData) => string;
-/**
- * The digits `wa.me` wants: country code and number, no `+`, spaces or
- * dashes. A leading `00` international prefix is dropped, since no country
- * code starts with 0.
- */
-export declare const whatsappNumber: (raw: string) => string;
-/** `https://wa.me/<number>?text=<message>`, or `null` when no number is set. */
-export declare const whatsappHref: (number: string, message?: string) => string | null;

package/dist/core/forms/whatsapp.js

@@ -1,29 +0,0 @@
-/**
- * Building the `wa.me` link a `CmsWhatsAppForm` opens: the editor's format
- * string with the visitor's answers substituted, sent to the editor's number.
- */
-const PLACEHOLDER = /\{([^{}\s]+)\}/g;
-/**
- * Substitute `{field}` placeholders with the submitted values. A field sent
- * more than once (checkboxes, multi-selects) joins with commas; a placeholder
- * with no matching field, and file uploads, become empty.
- */
-export const fillMessage = (template, data) => template.replace(PLACEHOLDER, (_, name) => data
-    .getAll(name)
-    .filter((value) => typeof value === 'string' && value !== '')
-    .join(', '));
-/**
- * The digits `wa.me` wants: country code and number, no `+`, spaces or
- * dashes. A leading `00` international prefix is dropped, since no country
- * code starts with 0.
- */
-export const whatsappNumber = (raw) => raw.replace(/\D/g, '').replace(/^00/, '');
-/** `https://wa.me/<number>?text=<message>`, or `null` when no number is set. */
-export const whatsappHref = (number, message = '') => {
-    const digits = whatsappNumber(number);
-    if (!digits)
-        return null;
-    return message
-        ? `https://wa.me/${digits}?text=${encodeURIComponent(message)}`
-        : `https://wa.me/${digits}`;
-};