@commercelayer/agent-cli 0.8.1 → 1.0.0-dev.0

package/dist/storefront.js

@@ -1,285 +0,0 @@
-// The storefront scaffold: a static site on drop-in.js, no build step. Three files:
-// index.html (the config block, the drop-in elements, the products grouped by
-// top-level category), styles.css (theme tokens first, then the drop-in.css
-// overrides, then the page) and app.js (market switch, category links, and a
-// product page at #/p/<sku>). Product images are the store's, at /img/<file> (from
-// .commercelayer/img/, uploaded by apply); a product without one shows the tile the
-// store host draws at /tiles/<sku>.svg. The agent then makes it the human's.
-import { isLocalImage } from './store.js';
-/** img/<file> is the store's image at /img/<file> on the store host, whatever page links it. */
-const imageSrc = (url) => (isLocalImage(url) ? `/${url}` : url);
-/** A product without an image gets the tile the store host draws for it, at /tiles/<sku>.svg. */
-const productImage = (p) => (p.image_url ? imageSrc(p.image_url) : `/tiles/${encodeURIComponent(p.sku)}.svg`);
-const esc = (t) => String(t ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
-/** The scaffold's files, by path relative to the storefront folder. */
-export function storefrontFiles(store, clientId) {
-    return { 'index.html': indexHtml(store, clientId), 'styles.css': STYLES, 'app.js': APP };
-}
-function indexHtml(store, clientId) {
-    const name = esc(store.name);
-    const card = (p, h) => {
-        const href = `#/p/${encodeURIComponent(p.sku)}`;
-        return `      <article class="product" id="p-${esc(p.sku)}">
-        <a class="media" href="${esc(href)}" tabindex="-1"><img src="${esc(productImage(p))}" alt="${esc(p.name)}"${p.image_url ? '' : ' loading="lazy"'}></a>
-        <${h}><a href="${esc(href)}">${esc(p.name)}</a></${h}>
-${p.description ? `        <p>${esc(p.description)}</p>\n` : ''}        <cl-price code="${esc(p.sku)}"><cl-price-amount type="compare-at"></cl-price-amount> <cl-price-amount type="price"></cl-price-amount></cl-price>
-        <cl-availability code="${esc(p.sku)}"><cl-availability-status type="available">In stock</cl-availability-status><cl-availability-status type="unavailable">Sold out</cl-availability-status></cl-availability>
-        <cl-add-to-cart code="${esc(p.sku)}">Add to cart</cl-add-to-cart>
-      </article>`;
-    };
-    // Products are grouped by the top level of their category, in order of first appearance;
-    // products with no category come last, under "Other". No categories: one grid.
-    const groups = new Map();
-    for (const p of store.products) {
-        const top = p.category?.split(' > ')[0] ?? '';
-        groups.set(top, [...(groups.get(top) ?? []), p]);
-    }
-    let listing;
-    let categoryNav = '';
-    if (![...groups.keys()].some((k) => k))
-        listing = `      <div class="grid">\n${store.products.map((p) => card(p, 'h2')).join('\n')}\n      </div>`;
-    else {
-        const ordered = [...groups.keys()].filter((k) => k).concat(groups.has('') ? [''] : []);
-        const used = new Set();
-        const ids = ordered.map((k) => {
-            const base = `category-${(k || 'other').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'other'}`;
-            let id = base;
-            for (let n = 2; used.has(id); n++)
-                id = `${base}-${n}`;
-            used.add(id);
-            return id;
-        });
-        categoryNav = `  <nav class="categories">\n${ordered.map((k, i) => `    <a href="#${ids[i]}">${esc(k || 'Other')}</a>`).join('\n')}\n  </nav>\n`;
-        listing = ordered
-            .map((k, i) => `      <section id="${ids[i]}">\n        <h2>${esc(k || 'Other')}</h2>\n        <div class="grid">\n${groups.get(k).map((p) => card(p, 'h3').replace(/^/gm, '  ')).join('\n')}\n        </div>\n      </section>`)
-            .join('\n');
-    }
-    const options = store.markets.map((m) => `          <option value="${esc(m.code)}">${esc(m.name)} (${esc(m.currency)})</option>`).join('\n');
-    // What the product page shows, by sku. Prices and availability come live from drop-in.js.
-    const data = Object.fromEntries(store.products.map((p) => [p.sku, { name: p.name, description: p.description, image_url: productImage(p), category: p.category }]));
-    const json = JSON.stringify(data, null, 2).replace(/</g, '\\u003c');
-    return `<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>${name}</title>
-  <!-- Commerce Layer drop-in.js: prices, availability, add to cart, the minicart (a slide-in panel, styled by minicart.css) and links to the hosted cart and checkout. -->
-  <link href="https://cdn.jsdelivr.net/npm/@commercelayer/drop-in.js@2/dist/drop-in/drop-in.css" rel="stylesheet">
-  <link href="https://cdn.jsdelivr.net/npm/@commercelayer/drop-in.js@2/dist/drop-in/minicart.css" rel="stylesheet">
-  <!-- After the drop-in.js stylesheets: styles.css overrides them with the same selectors. Restyle through its tokens.
-       Product images are the store's, at /img/ (.commercelayer/img/, uploaded by apply). Put this site's own files in assets/: /img/ is not served from here. -->
-  <link href="styles.css" rel="stylesheet">
-  <script>
-    // The market comes from ?market=<code>; the first market in store.yml is the default. Keep clientId as it is.
-    var market = new URLSearchParams(location.search).get('market') || '${esc(store.markets[0].code)}';
-    window.commercelayerConfig = {
-      clientId: '${esc(clientId)}',
-      scope: 'market:code:' + market,
-      defaultAttributes: { orders: { language_code: 'en', return_url: location.origin + location.pathname } }
-    };
-  </script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@commercelayer/drop-in.js@2/dist/drop-in/drop-in.esm.js"></script>
-  <script src="app.js" defer></script>
-</head>
-<body>
-  <header>
-    <h1><a href="#">${name}</a></h1>
-    <nav>
-      <label><span class="market-label">Market</span>
-        <select id="market">
-${options}
-        </select>
-      </label>
-      <cl-cart-link aria-label="Cart">Cart (<cl-cart-count></cl-cart-count>)<cl-cart type="mini" open-on-add></cl-cart></cl-cart-link>
-      <cl-checkout-link>Checkout</cl-checkout-link>
-    </nav>
-  </header>
-${categoryNav}  <main>
-    <div id="listing">
-${listing}
-    </div>
-    <!-- The product page: app.js fills it from #product-template and #products when the address is #/p/<sku>. -->
-    <div id="product-page" hidden></div>
-  </main>
-  <footer>Sandbox store: test payments only.</footer>
-
-  <!-- The product page's markup. Elements with data-field get the product's data; elements with data-code get code="<sku>" for drop-in.js. -->
-  <template id="product-template">
-    <article class="product-page">
-      <a class="back" href="#">&larr; All products</a>
-      <div class="media"><img data-field="image_url" alt=""><div class="placeholder" aria-hidden="true"></div></div>
-      <div class="info">
-        <p class="category" data-field="category"></p>
-        <h2 data-field="name"></h2>
-        <p data-field="description"></p>
-        <cl-price data-code><cl-price-amount type="compare-at"></cl-price-amount> <cl-price-amount type="price"></cl-price-amount></cl-price>
-        <cl-availability data-code><cl-availability-status type="available">In stock</cl-availability-status><cl-availability-status type="unavailable">Sold out</cl-availability-status></cl-availability>
-        <cl-add-to-cart data-code>Add to cart</cl-add-to-cart>
-      </div>
-    </article>
-  </template>
-  <template id="not-found-template">
-    <article class="product-page">
-      <a class="back" href="#">&larr; All products</a>
-      <p>This product is not in the store.</p>
-    </article>
-  </template>
-  <!-- The products, by sku: name, description, image_url, category. Keep it in step with the cards above. -->
-  <script type="application/json" id="products">
-${json}
-  </script>
-</body>
-</html>
-`;
-}
-const STYLES = `/* The storefront's styles, in three parts: theme tokens, drop-in.js overrides, the page.
-   Restyle the page by changing the tokens; a dark theme is color-scheme: dark with paper and ink swapped.
-   index.html links this file after the drop-in.js stylesheets: the overrides use the same selectors as
-   drop-in.css, so they win by coming later. Keep that order. */
-
-/* 1. Theme tokens */
-:root {
-  color-scheme: light;
-  --paper: #ffffff;     /* page background */
-  --ink: #16181d;       /* text and prices */
-  --muted: #5d6572;     /* secondary text, compare-at prices, availability */
-  --line: #e3e6ea;      /* borders, disabled buttons */
-  --accent: #1f5eff;    /* buttons, link hover */
-  --on-accent: #ffffff; /* text on the accent */
-  --radius: 8px;
-  --font: system-ui, sans-serif;
-  /* drop-in.css's own defaults (add to cart, cart count) read these. */
-  --cl-color-primary: var(--accent);
-  --cl-color-white: var(--on-accent);
-}
-
-/* 2. drop-in.js overrides */
-/* drop-in.css colours cl-price-amount itself (#101111), so inheriting is not enough: set it here. */
-cl-price-amount { color: var(--ink); font-weight: 600; }
-cl-price-amount[type="compare-at"] { color: var(--muted); font-weight: 400; }
-cl-availability { font-size: 13px; color: var(--muted); }
-/* cl-add-to-cart is the button itself (it has no ::part); drop-in.css colours it with these same selectors. */
-cl-add-to-cart { align-self: flex-start; padding: 10px 16px; border-radius: calc(var(--radius) - 2px); font: inherit; font-weight: 600; background-color: var(--line); color: var(--muted); }
-cl-add-to-cart:not([aria-disabled=true]) { background-color: var(--accent); color: var(--on-accent); }
-/* cl-checkout-link renders a plain <a> (no shadow DOM); without an order it is aria-disabled. */
-cl-checkout-link a { display: inline-block; padding: 8px 14px; border-radius: calc(var(--radius) - 2px); background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; }
-cl-checkout-link[aria-disabled="true"] a { background: var(--line); color: var(--muted); }
-/* drop-in.css styles the count as a badge beside a cart icon (absolute, pushed right). The link is text here, so render it inline: "Cart (3)". */
-cl-cart-link cl-cart-count { position: static; transform: none; display: inline; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; }
-
-/* 3. The page */
-body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper); }
-a { color: inherit; }
-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
-header h1 { margin: 0; font-size: 20px; }
-header h1 a { text-decoration: none; }
-/* The nav never wraps inside: on a narrow screen it moves under the store name as a whole. */
-header nav { display: flex; align-items: center; gap: 16px; margin-left: auto; white-space: nowrap; }
-header select { font: inherit; color: inherit; background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--radius) / 2); padding: 4px 6px; }
-nav.categories { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 14px 24px; border-bottom: 1px solid var(--line); }
-nav.categories a { text-decoration: none; font-size: 15px; }
-nav.categories a:hover { color: var(--accent); }
-main { max-width: 1100px; margin: 0 auto; padding: 32px 24px; }
-main section { scroll-margin-top: 16px; }
-main section + section { margin-top: 40px; }
-main section > h2 { margin: 0 0 16px; font-size: 22px; }
-.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
-.product { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 16px; }
-.product h2, .product h3 { margin: 0; font-size: 17px; }
-.product h2 a, .product h3 a { text-decoration: none; }
-.product h2 a:hover, .product h3 a:hover { color: var(--accent); }
-.product p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
-.product cl-add-to-cart { margin-top: auto; }
-.media img, .media .placeholder { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--radius) - 2px); }
-/* No image: a plain tile a shade off the page, in any theme. */
-.placeholder { background: color-mix(in srgb, var(--ink) 6%, var(--paper)); }
-.product-page { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
-.product-page .back { grid-column: 1 / -1; text-decoration: none; color: var(--muted); }
-.product-page .back:hover { color: var(--accent); }
-.product-page .info { display: flex; flex-direction: column; gap: 12px; }
-.product-page .info h2 { margin: 0; font-size: 28px; }
-.product-page .info p { margin: 0; line-height: 1.6; }
-.product-page .category { color: var(--muted); font-size: 14px; }
-footer { padding: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
-@media (max-width: 720px) {
-  .product-page { grid-template-columns: 1fr; }
-}
-@media (max-width: 480px) {
-  header, nav.categories { padding-left: 16px; padding-right: 16px; }
-  header nav { gap: 12px; }
-  .market-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
-  main { padding: 24px 16px; }
-}
-`;
-const APP = `// The storefront's behaviour, no build step: the market switch, the category links,
-// and the product page at #/p/<sku>, filled from #product-template and the #products data.
-// drop-in.js does the commerce: prices, availability, cart, checkout.
-
-(function () {
-  var products = JSON.parse(document.getElementById('products').textContent);
-  var listing = document.getElementById('listing');
-  var page = document.getElementById('product-page');
-  var storeTitle = document.title;
-
-  // Market: ?market=<code> picks the drop-in.js scope (see the config block in index.html).
-  var select = document.getElementById('market');
-  select.value = market;
-  select.addEventListener('change', function () {
-    location.search = '?market=' + encodeURIComponent(select.value);
-  });
-
-  function fill(root, product, sku) {
-    root.querySelectorAll('[data-field]').forEach(function (el) {
-      var value = product[el.dataset.field];
-      if (el.tagName === 'IMG') {
-        if (!value) return el.remove();
-        el.src = value;
-        el.alt = product.name;
-        if (el.nextElementSibling) el.nextElementSibling.remove();
-      } else if (value) el.textContent = value;
-      else el.remove();
-    });
-    // code is set before the elements join the page, so drop-in.js reads it when they connect.
-    root.querySelectorAll('[data-code]').forEach(function (el) {
-      el.setAttribute('code', sku);
-      el.removeAttribute('data-code');
-    });
-  }
-
-  function showProduct(sku) {
-    var product = products[sku];
-    var view = document.getElementById(product ? 'product-template' : 'not-found-template').content.cloneNode(true);
-    if (product) fill(view, product, sku);
-    page.replaceChildren(view);
-    listing.hidden = true;
-    page.hidden = false;
-    document.title = (product ? product.name + ' · ' : '') + storeTitle;
-    window.scrollTo(0, 0);
-  }
-
-  function showListing(anchor) {
-    page.hidden = true;
-    page.replaceChildren();
-    listing.hidden = false;
-    document.title = storeTitle;
-    var target = anchor && document.getElementById(anchor);
-    if (target) target.scrollIntoView();
-  }
-
-  var lastSku = null;
-  function route() {
-    var hash = decodeURIComponent(location.hash.slice(1));
-    if (hash.indexOf('/p/') === 0) {
-      lastSku = hash.slice(3);
-      return showProduct(lastSku);
-    }
-    // A category link (#category-...), or the listing (#): back from a product, return to its card.
-    showListing(hash || (lastSku && 'p-' + lastSku));
-    lastSku = null;
-  }
-
-  window.addEventListener('hashchange', route);
-  route();
-})();
-`;

package/dist/ucp/buy.js

@@ -1,90 +0,0 @@
-// Buying from a store the way any shopping agent would: discover, search, cart,
-// checkout, address, pay with the sandbox handler, read the order back.
-import { fail } from '../output.js';
-import { discover, replay, shopping, UcpError } from './client.js';
-import { SANDBOX_CREDENTIAL_TYPE, SANDBOX_HANDLER_ID, SANDBOX_TOKEN_DECLINED, SANDBOX_TOKEN_SUCCESS } from './platform.js';
-export const TEST_BUYER = { first_name: 'Test', last_name: 'Buyer', email: 'buyer@example.com', phone_number: '+10000000000' };
-export function testAddress(country) {
-    return { id: 'dest_1', first_name: 'Test', last_name: 'Buyer', street_address: '1 Test Street', address_locality: 'Testville', postal_code: '00000', address_country: country };
-}
-export function sandboxInstrument(decline = false) {
-    return {
-        id: 'pi_1',
-        handler_id: SANDBOX_HANDLER_ID,
-        type: 'card',
-        selected: true,
-        display: { brand: 'visa', last_digits: '4242', expiry_month: 12, expiry_year: 2030 },
-        credential: { type: SANDBOX_CREDENTIAL_TYPE, token: decline ? SANDBOX_TOKEN_DECLINED : SANDBOX_TOKEN_SUCCESS, expiry: new Date(Date.now() + 1800_000).toISOString() },
-    };
-}
-export const TEST_SIGNALS = { 'dev.ucp.buyer_ip': '203.0.113.1', 'dev.ucp.user_agent': 'c11r' };
-function note(steps, step, call, result) {
-    steps.push({ step, request: `${call.method} ${new URL(call.url).pathname}`, status: call.status, result, ...(call.signature ? { signature: call.signature } : {}) });
-    return call.body;
-}
-/** Country the product ships to: from the catalog's fulfillment data, else from the caller. */
-function shipTo(variant, wanted) {
-    if (wanted)
-        return wanted.toUpperCase();
-    const plain = variant.fulfillment?.methods?.[0]?.description?.plain ?? '';
-    const m = plain.match(/Ships to ([A-Z]{2})/);
-    return m ? m[1] : 'US';
-}
-export async function buy(origin, opts = {}) {
-    const steps = [];
-    const store = await discover(origin);
-    steps.push({ step: 'discover', request: 'GET /.well-known/ucp', status: 200, result: `UCP ${store.profile.ucp.version}, ${store.capabilities.size} shared capabilities` });
-    try {
-        const search = note(steps, 'search', await shopping.search(store, { query: opts.sku ?? '', context: opts.country ? { address_country: opts.country.toUpperCase() } : {} }), '');
-        steps[steps.length - 1].result = `${search.products.length} products`;
-        const product = opts.sku ? search.products.find((p) => p.variants.some((v) => v.id === opts.sku || v.sku === opts.sku)) : search.products[0];
-        if (!product)
-            fail('no_product', opts.sku ? `The catalog has no product ${opts.sku}.` : 'The catalog is empty.', 'Add products to .commercelayer/store.yml or .commercelayer/products/ and run `c11r apply`.');
-        const variant = opts.sku ? product.variants.find((v) => v.id === opts.sku || v.sku === opts.sku) : product.variants[0];
-        const country = shipTo(variant, opts.country);
-        const quantity = opts.quantity ?? 1;
-        const context = { address_country: country, currency: variant.price.currency };
-        const lineItems = [{ item: { id: variant.id }, quantity }];
-        const discounts = opts.code ? { discounts: { codes: [opts.code] } } : {};
-        let create;
-        if (opts.viaCart && store.capabilities.has('dev.ucp.shopping.cart')) {
-            const cart = note(steps, 'cart', await shopping.createCart(store, { line_items: lineItems, context, ...discounts }), '');
-            steps[steps.length - 1].result = `cart ${cart.id}, ${cart.totals.at(-1).amount} ${cart.currency}`;
-            create = { cart_id: cart.id, buyer: TEST_BUYER, context };
-        }
-        else
-            create = { line_items: lineItems, buyer: TEST_BUYER, context, ...discounts };
-        let checkout = note(steps, 'checkout', await shopping.createCheckout(store, create), '');
-        steps[steps.length - 1].result = `checkout ${checkout.id} ${checkout.status}`;
-        const update = replay(checkout);
-        update.buyer = { ...TEST_BUYER, ...(checkout.buyer?.consent ? { consent: checkout.buyer.consent } : {}) };
-        if (update.fulfillment) {
-            update.fulfillment.methods[0].destinations = [testAddress(country)];
-            update.fulfillment.methods[0].selected_destination_id = 'dest_1';
-        }
-        checkout = note(steps, 'address', await shopping.updateCheckout(store, checkout.id, update), '');
-        steps[steps.length - 1].result = `${checkout.status}, total ${checkout.totals.at(-1).amount} ${checkout.currency}`;
-        if (checkout.status !== 'ready_for_complete') {
-            const why = (checkout.messages ?? []).filter((m) => m.type === 'error').map((m) => `${m.code} at ${m.path}: ${m.content}`).join('; ');
-            fail('checkout_not_ready', `The checkout is ${checkout.status}: ${why}`, 'Fix the store (markets, countries, prices) and run the command again.');
-        }
-        // The checkout as it was before paying: its warnings (a code that applied nothing) and discounts.
-        const ready = checkout;
-        const completeCall = await shopping.completeCheckout(store, checkout.id, { payment: { instruments: [sandboxInstrument(opts.decline)] }, signals: TEST_SIGNALS });
-        checkout = note(steps, 'pay', completeCall, '');
-        steps[steps.length - 1].result = checkout.status === 'completed' ? `completed, order ${checkout.order.id}` : `${checkout.status}: ${(checkout.messages ?? []).map((m) => m.code).join(', ')}`;
-        let order = null;
-        if (checkout.order) {
-            order = note(steps, 'order', await shopping.getOrder(store, checkout.order.id), '');
-            steps[steps.length - 1].result = `${order.label}, ${order.line_items.length} line item(s), ${order.totals.at(-1).amount} ${order.currency}`;
-        }
-        return { store, steps, checkout, ready, order };
-    }
-    catch (e) {
-        if (e instanceof UcpError) {
-            steps.push({ step: 'failed', request: `${e.call.method} ${new URL(e.call.url).pathname}`, status: e.call.status, result: e.message });
-            fail('ucp_error', e.message, `The store answered in a way the buyer could not continue from. Steps so far: ${steps.map((s) => `${s.step} (${s.result})`).join(' → ')}. Run \`c11r ucp check\` for the full conformance report.`);
-        }
-        throw e;
-    }
-}