Fenêtre de livraison estimée

{%- comment -%} NAHNAH AI · Fenêtre de livraison estimée {%- endcomment -%}
<section class="nn-panier-fenetre-livraison" data-heure-limite="{{ section.settings.heure_limite }}" data-preparation="{{ section.settings.jours_preparation }}" data-min="{{ section.settings.jours_min }}" data-max="{{ section.settings.jours_max }}" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }};">
  <div class="nn-panier-fenetre-livraison__carte">
    <p class="nn-panier-fenetre-livraison__titre">{{ section.settings.titre | escape }}</p>
    <ol class="nn-panier-fenetre-livraison__frise">
      <li><span class="nn-panier-fenetre-livraison__point">🛒</span><strong>{{ section.settings.etape_1 | escape }}</strong><em data-etape="commande">—</em></li>
      <li><span class="nn-panier-fenetre-livraison__point">📦</span><strong>{{ section.settings.etape_2 | escape }}</strong><em data-etape="expedition">—</em></li>
      <li><span class="nn-panier-fenetre-livraison__point">🏠</span><strong>{{ section.settings.etape_3 | escape }}</strong><em data-etape="livraison">—</em></li>
    </ol>
  </div>
</section>
{% schema %}
{"name":"Livraison estimée","settings":[
{"type":"text","id":"titre","label":"Titre","default":"Quand vas-tu recevoir ta commande ?"},
{"type":"text","id":"etape_1","label":"Étape 1","default":"Commandé"},
{"type":"text","id":"etape_2","label":"Étape 2","default":"Expédié"},
{"type":"text","id":"etape_3","label":"Étape 3","default":"Livré"},
{"type":"range","id":"heure_limite","label":"Heure limite d'expédition le jour même","min":8,"max":20,"step":1,"default":14},
{"type":"range","id":"jours_preparation","label":"Jours de préparation","min":0,"max":5,"step":1,"default":1},
{"type":"range","id":"jours_min","label":"Livraison minimum (jours ouvrés)","min":1,"max":15,"step":1,"default":2},
{"type":"range","id":"jours_max","label":"Livraison maximum (jours ouvrés)","min":1,"max":20,"step":1,"default":4},
{"type":"color","id":"couleur_fond","label":"Fond","default":"#ECFDF5"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#1A1A1A"},
{"type":"color","id":"couleur_accent","label":"Accent","default":"#059669"}],
"presets":[{"name":"Fenêtre de livraison estimée"}]}
{% endschema %}

{% stylesheet %}
/* Frise en trois étapes reliées par une ligne qui se remplit */
.nn-panier-fenetre-livraison{color:var(--nn-texte);padding:12px 16px}
.nn-panier-fenetre-livraison__carte{max-width:640px;margin:0 auto;background:var(--nn-fond);border-radius:18px;padding:18px}
.nn-panier-fenetre-livraison__titre{margin:0 0 14px;font-weight:700;text-align:center}
.nn-panier-fenetre-livraison__frise{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);position:relative;text-align:center}
.nn-panier-fenetre-livraison__frise::before{content:"";position:absolute;top:20px;left:16%;right:16%;height:3px;background:color-mix(in srgb,var(--nn-accent) 20%,transparent)}
.nn-panier-fenetre-livraison__frise::after{content:"";position:absolute;top:20px;left:16%;width:68%;height:3px;background:var(--nn-accent);transform-origin:left;animation:nn-panier-fenetre-livraison-remplir 1.4s .2s ease both}
.nn-panier-fenetre-livraison__frise li{position:relative;z-index:1;display:grid;justify-items:center;gap:4px;font-size:14px}
.nn-panier-fenetre-livraison__point{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;border:3px solid var(--nn-accent);font-size:18px}
.nn-panier-fenetre-livraison em{font-style:normal;font-size:13px;color:var(--nn-accent);font-weight:700}
@keyframes nn-panier-fenetre-livraison-remplir{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){.nn-panier-fenetre-livraison__frise::after{animation:none}}
{% endstylesheet %}

{% javascript %}
// Calcule les dates estimées en jours ouvrés (sans samedi ni dimanche)
(function () {
  function ajouterJoursOuvres(date, n) {
    var d = new Date(date);
    while (n > 0) { d.setDate(d.getDate() + 1); if (d.getDay() !== 0 && d.getDay() !== 6) { n--; } }
    return d;
  }
  document.querySelectorAll('.nn-panier-fenetre-livraison').forEach(function (bloc) {
    var ds = bloc.dataset, maintenant = new Date();
    var format = new Intl.DateTimeFormat(document.documentElement.lang || 'fr-FR', { weekday: 'short', day: 'numeric', month: 'short' });
    var preparation = parseInt(ds.preparation, 10);
    // Après l'heure limite ou le week-end, on ajoute un jour de préparation
    if (maintenant.getHours() >= parseInt(ds.heureLimite, 10) || maintenant.getDay() === 0 || maintenant.getDay() === 6) { preparation += 1; }
    var expedition = preparation ? ajouterJoursOuvres(maintenant, preparation) : maintenant;
    var min = ajouterJoursOuvres(expedition, parseInt(ds.min, 10));
    var max = ajouterJoursOuvres(expedition, Math.max(parseInt(ds.min, 10), parseInt(ds.max, 10)));
    bloc.querySelector('[data-etape="commande"]').textContent = format.format(maintenant);
    bloc.querySelector('[data-etape="expedition"]').textContent = format.format(expedition);
    bloc.querySelector('[data-etape="livraison"]').textContent = format.format(min) + ' – ' + format.format(max);
  });
})();
{% endjavascript %}