@altazion/commerce-sdk-htmx 26.618.8367 → 26.619.8376

package/dist/index.iife.js

@@ -657,8 +657,8 @@ var AltazionCommerceSdkHtmx = function(exports, commerceSdkCore) {
         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");
@@ -955,6 +955,179 @@ var AltazionCommerceSdkHtmx = function(exports, commerceSdkCore) {
     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';
@@ -1040,6 +1213,7 @@ var AltazionCommerceSdkHtmx = function(exports, commerceSdkCore) {
       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 = () => {
@@ -1087,6 +1261,7 @@ var AltazionCommerceSdkHtmx = function(exports, commerceSdkCore) {
           document.removeEventListener("altazion:marketing:items-loaded", syncMarketingItemsFromEvent);
         }
         declarativeRenderer.dispose();
+        disposeStorePicker();
         unsubscribeConnectivity == null ? void 0 : unsubscribeConnectivity();
       }
     };