@altazion/commerce-sdk-htmx 26.618.8362 → 26.619.8376

package/dist/index.cjs

@@ -658,8 +658,8 @@ const storesModuleDefinition = {
       case "findByLocation": {
         const latitude = requireNumber(payload.latitude, "latitude");
         const longitude = requireNumber(payload.longitude, "longitude");
-        const radiusKm = payload.radiusKm === void 0 ? 50 : requireNumber(payload.radiusKm, "radiusKm");
-        return client.stores.findByLocation(latitude, longitude, radiusKm);
+        const countryCode = payload.countryCode === void 0 ? "FRA" : requireString(payload.countryCode, "countryCode");
+        return client.stores.findByLocation(latitude, longitude, countryCode);
       }
       case "findByPostalCode": {
         const postalCode = requireString(payload.postalCode, "postalCode");
@@ -956,6 +956,179 @@ function resolveTemplate(templateId, handlebars, templateCache) {
   templateCache.set(templateId, compiled);
   return compiled;
 }
+const DIALOG_SELECTOR = "[data-hz-store-picker]";
+const TEMPLATE_ID = "hz-store-picker-store-tmpl";
+const RESULTS_SELECTOR = "[data-store-picker-results]";
+const HINT_SELECTOR = "[data-store-picker-hint]";
+const FORM_SELECTOR = "[data-store-picker-form]";
+const INPUT_SELECTOR = "[data-store-picker-input]";
+function initStorePicker(client, handlebars) {
+  if (typeof document === "undefined") return () => {
+  };
+  let renderStore = null;
+  const templateEl = document.getElementById(TEMPLATE_ID);
+  if (templateEl && handlebars) {
+    try {
+      const tplSource = templateEl.innerHTML;
+      const compiled = handlebars.compile(tplSource);
+      renderStore = (store) => compiled(store);
+    } catch {
+    }
+  }
+  if (!renderStore) {
+    renderStore = fallbackRender;
+  }
+  function getDialog() {
+    return document.querySelector(DIALOG_SELECTOR);
+  }
+  function openDialog() {
+    var _a;
+    (_a = getDialog()) == null ? void 0 : _a.showModal();
+  }
+  function closeDialog() {
+    var _a;
+    (_a = getDialog()) == null ? void 0 : _a.close();
+  }
+  function getConfig() {
+    const dialog = getDialog();
+    return {
+      countryCode: (dialog == null ? void 0 : dialog.dataset.storePickerCountry) ?? "FRA",
+      feature: (dialog == null ? void 0 : dialog.dataset.storePickerFeature) ?? "InStoreOrder"
+    };
+  }
+  function renderResults(stores) {
+    const dialog = getDialog();
+    if (!dialog) return;
+    const list = dialog.querySelector(RESULTS_SELECTOR);
+    const hint = dialog.querySelector(HINT_SELECTOR);
+    if (!list) return;
+    if (stores.length === 0) {
+      list.innerHTML = "";
+      list.hidden = true;
+      if (hint) {
+        hint.textContent = "Aucun magasin trouvé dans ce secteur.";
+        hint.hidden = false;
+      }
+      return;
+    }
+    list.innerHTML = stores.map((s) => renderStore(s)).join("");
+    list.hidden = false;
+    if (hint) hint.hidden = true;
+  }
+  function showSearching() {
+    const dialog = getDialog();
+    if (!dialog) return;
+    const hint = dialog.querySelector(HINT_SELECTOR);
+    const list = dialog.querySelector(RESULTS_SELECTOR);
+    if (hint) {
+      hint.textContent = "Recherche en cours…";
+      hint.hidden = false;
+    }
+    if (list) list.hidden = true;
+  }
+  function showError(message) {
+    const dialog = getDialog();
+    if (!dialog) return;
+    const hint = dialog.querySelector(HINT_SELECTOR);
+    if (hint) {
+      hint.textContent = message;
+      hint.hidden = false;
+    }
+  }
+  async function handlePostalCodeSearch(postalCode) {
+    showSearching();
+    const { countryCode, feature } = getConfig();
+    try {
+      const stores = await client.stores.findByPostalCode(postalCode, countryCode, 10, feature);
+      renderResults(stores);
+    } catch {
+      showError("La recherche a échoué. Vérifiez votre code postal et réessayez.");
+    }
+  }
+  async function handleGeolocate() {
+    if (!navigator.geolocation) {
+      showError("La géolocalisation n'est pas disponible sur cet appareil.");
+      return;
+    }
+    showSearching();
+    const { countryCode, feature } = getConfig();
+    navigator.geolocation.getCurrentPosition(
+      async (position) => {
+        try {
+          const stores = await client.stores.findByLocation(
+            position.coords.latitude,
+            position.coords.longitude,
+            countryCode,
+            10,
+            feature
+          );
+          renderResults(stores);
+        } catch {
+          showError("La recherche a échoué. Veuillez réessayer.");
+        }
+      },
+      () => {
+        showError("Impossible d'obtenir votre position. Vérifiez les autorisations de géolocalisation.");
+      }
+    );
+  }
+  async function handleSelectStore(storeGuid) {
+    try {
+      await client.session.associateStore(storeGuid);
+      closeDialog();
+      document.dispatchEvent(new CustomEvent("altazion:stores:store-associated", {
+        bubbles: true,
+        detail: { storeGuid }
+      }));
+      window.location.reload();
+    } catch {
+      showError("Impossible de sélectionner ce magasin. Veuillez réessayer.");
+    }
+  }
+  function handleClick(event) {
+    const target = event.target.closest("[data-action]");
+    if (!target) return;
+    const action = target.dataset.action;
+    switch (action) {
+      case "open-store-picker":
+        openDialog();
+        break;
+      case "close-store-picker":
+        closeDialog();
+        break;
+      case "store-picker-geolocate":
+        void handleGeolocate();
+        break;
+      case "select-store": {
+        const guid = target.dataset.storeGuid;
+        if (guid) void handleSelectStore(guid);
+        break;
+      }
+    }
+  }
+  function handleFormSubmit(event) {
+    const form = event.target.closest(FORM_SELECTOR);
+    if (!form) return;
+    event.preventDefault();
+    const input = form.querySelector(INPUT_SELECTOR);
+    const postalCode = input == null ? void 0 : input.value.trim();
+    if (postalCode) void handlePostalCodeSearch(postalCode);
+  }
+  document.addEventListener("click", handleClick);
+  document.addEventListener("submit", handleFormSubmit);
+  return () => {
+    document.removeEventListener("click", handleClick);
+    document.removeEventListener("submit", handleFormSubmit);
+  };
+}
+function fallbackRender(store) {
+  const name = store.label ?? store.code ?? "Magasin";
+  const address = [store.streetAddress, store.postalCode, store.city].filter(Boolean).join(", ");
+  return `<li class="hz-store-picker__item"><div class="hz-store-picker__item-info"><strong class="hz-store-picker__item-name">${escHtml(name)}</strong>` + (address ? `<address class="hz-store-picker__item-address">${escHtml(address)}</address>` : "") + `</div><button class="hz-store-picker__item-select" type="button" data-action="select-store" data-store-guid="${escHtml(store.guid)}">Choisir ce magasin</button></li>`;
+}
+function escHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
 const productCardTemplate = '<article class="altz-product-card{{#unless (isAvailable availability)}} altz-product-card--unavailable{{/unless}}">\n  {{#if imageUrl}}\n  <a href="{{productUrl reference}}" class="altz-product-card__image-link" aria-label="{{name}}">\n    <img\n      src="{{thumbnailUrl imageUrl 400}}"\n      alt="{{name}}"\n      class="altz-product-card__image"\n      loading="lazy"\n      width="400"\n    />\n  </a>\n  {{/if}}\n\n  <div class="altz-product-card__body">\n    <a href="{{productUrl reference}}" class="altz-product-card__title">\n      {{name}}\n    </a>\n\n    <div class="altz-product-card__pricing">\n      {{#if discount}}\n      <span class="altz-product-card__price altz-product-card__price--discounted">\n        {{formatPrice price}}\n      </span>\n      <span class="altz-product-card__price altz-product-card__price--original">\n        {{formatPrice originalPrice}}\n      </span>\n      <span class="altz-product-card__discount-badge">\n        {{discountPercent originalPrice price}}\n      </span>\n      {{else}}\n      <span class="altz-product-card__price">\n        {{formatPrice price}}\n      </span>\n      {{/if}}\n    </div>\n\n    {{#unless (isAvailable availability)}}\n    <p class="altz-product-card__unavailable">{{unavailableLabel}}</p>\n    {{/unless}}\n\n    {{#if (isAvailable availability)}}\n    <button\n      class="altz-product-card__add-to-cart"\n      hx-ext="altazion"\n      hx-altazion-cart-action="addItem"\n      hx-altazion-cart-reference="{{reference}}"\n      hx-altazion-cart-quantity="1"\n      hx-altazion-refresh="#altz-cart-mini"\n      hx-indicator=".altz-spinner"\n    >\n      {{addToCartLabel}}\n    </button>\n    {{/if}}\n  </div>\n</article>\n';
 const cartMiniTemplate = '<div id="altz-cart-mini" class="altz-cart-mini">\n  <div class="altz-cart-mini__header">\n    <span class="altz-cart-mini__label">{{cartLabel}}</span>\n    <span class="altz-cart-mini__count">{{cartCount}}</span>\n  </div>\n\n  {{#cartHasItems}}\n  <ul class="altz-cart-mini__lines">\n    {{#each lines}}\n    <li class="altz-cart-mini__line">\n      <span class="altz-cart-mini__line-name">{{this.productName}}</span>\n      <span class="altz-cart-mini__line-qty">× {{this.quantity}}</span>\n      <span class="altz-cart-mini__line-price">{{formatPrice this.unitPriceWithTax}}</span>\n    </li>\n    {{/each}}\n  </ul>\n\n  <div class="altz-cart-mini__total">\n    <span>{{totalLabel}}</span>\n    <strong>{{cartTotal}}</strong>\n  </div>\n\n  <a href="{{cartUrl}}" class="altz-cart-mini__cta">\n    {{viewCartLabel}}\n  </a>\n  {{/cartHasItems}}\n\n  {{^cartHasItems}}\n  <p class="altz-cart-mini__empty">{{emptyLabel}}</p>\n  {{/cartHasItems}}\n</div>\n';
 const productListTemplate = '<section class="altz-product-list">\n  {{#if title}}\n  <h2 class="altz-product-list__title">{{title}}</h2>\n  {{/if}}\n\n  {{#if products.length}}\n  <ul class="altz-product-list__grid" role="list">\n    {{#each products}}\n    <li class="altz-product-list__item">\n      <article class="altz-product-card{{#unless (isAvailable this.availability)}} altz-product-card--unavailable{{/unless}}">\n        {{#if this.imageUrl}}\n        <a href="{{productUrl this.reference}}" class="altz-product-card__image-link" aria-label="{{this.name}}">\n          <img\n            src="{{thumbnailUrl this.imageUrl 300}}"\n            alt="{{this.name}}"\n            class="altz-product-card__image"\n            loading="lazy"\n            width="300"\n          />\n        </a>\n        {{/if}}\n\n        <div class="altz-product-card__body">\n          <a href="{{productUrl this.reference}}" class="altz-product-card__title">\n            {{this.name}}\n          </a>\n\n          <div class="altz-product-card__pricing">\n            {{#if this.discount}}\n            <span class="altz-product-card__price altz-product-card__price--discounted">\n              {{formatPrice this.price}}\n            </span>\n            <span class="altz-product-card__price altz-product-card__price--original">\n              {{formatPrice this.originalPrice}}\n            </span>\n            <span class="altz-product-card__discount-badge">\n              {{discountPercent this.originalPrice this.price}}\n            </span>\n            {{else}}\n            <span class="altz-product-card__price">\n              {{formatPrice this.price}}\n            </span>\n            {{/if}}\n          </div>\n\n          {{#if (isAvailable this.availability)}}\n          <button\n            class="altz-product-card__add-to-cart"\n            hx-ext="altazion"\n            hx-altazion-cart-action="addItem"\n            hx-altazion-cart-reference="{{this.reference}}"\n            hx-altazion-cart-quantity="1"\n            hx-altazion-refresh="#altz-cart-mini"\n            hx-indicator=".altz-spinner"\n          >\n            {{../addToCartLabel}}\n          </button>\n          {{/if}}\n        </div>\n      </article>\n    </li>\n    {{/each}}\n  </ul>\n  {{else}}\n  <p class="altz-product-list__empty">{{emptyLabel}}</p>\n  {{/if}}\n</section>\n';
@@ -1041,6 +1214,7 @@ function initAltazionHtmx(config) {
     registerCartHelpers(handlebars, getCart, defaults);
   }
   declarativeRenderer.render();
+  const disposeStorePicker = initStorePicker(client, handlebarsRuntime);
   const offlineEl = typeof document !== "undefined" ? document.querySelector(offlineSelector) ?? document.body : null;
   let lastConnectivityStatus = null;
   const updateOfflineClass = () => {
@@ -1088,6 +1262,7 @@ function initAltazionHtmx(config) {
         document.removeEventListener("altazion:marketing:items-loaded", syncMarketingItemsFromEvent);
       }
       declarativeRenderer.dispose();
+      disposeStorePicker();
       unsubscribeConnectivity == null ? void 0 : unsubscribeConnectivity();
     }
   };