Pre-order / Notify When Back

{%- comment -%}
  modblo. Pre-order / Notify When Back in Stock
  Replaces Back In Stock / Restock Rocket / Notify Me apps.
  Two modes in one section:
    - Notify mode: replaces the sold-out CTA with email capture
    - Pre-order mode: lets buyers reserve a not-yet-released variant
  Auto-detects sold-out variants, posts to Shopify's customer endpoint
  with a tag like "notify:product-handle:variant-id" — wires straight
  into your Klaviyo / Mailchimp restock flows.
{%- endcomment -%}

{%- assign product = product -%}
{%- if section.settings.product -%}
  {%- assign product = section.settings.product -%}
{%- endif -%}

{%- if product != blank -%}
{%- assign current = product.selected_or_first_available_variant -%}
{%- assign mode = section.settings.mode | default: 'notify' -%}

<div class="modblo-nb" data-modblo-nb
     data-section-id="{{ section.id }}"
     data-mode="{{ mode }}"
     data-product-handle="{{ product.handle }}"
     style="--modblo-nb-bg: {{ section.settings.bg }};
            --modblo-nb-fg: {{ section.settings.fg }};
            --modblo-nb-accent: {{ section.settings.accent }};">

  {%- comment -%} Variant data — JS reads to know availability {%- endcomment -%}
  <script type="application/json" data-modblo-nb-variants>
    [{%- for v in product.variants -%}
      { "id": {{ v.id }}, "available": {{ v.available }}, "title": {{ v.title | json }} }{%- unless forloop.last -%},{%- endunless -%}
    {%- endfor -%}]
  </script>

  {%- comment -%} Default state: product is available — nothing renders {%- endcomment -%}
  <div class="modblo-nb__panel" data-modblo-nb-panel hidden>
    <div class="modblo-nb__view modblo-nb__view--form" data-modblo-nb-view="form">
      <header class="modblo-nb__head">
        <span class="modblo-nb__icon" aria-hidden="true">
          {%- if mode == 'preorder' -%}
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
            </svg>
          {%- else -%}
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
              <path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/>
            </svg>
          {%- endif -%}
        </span>
        <div>
          <p class="modblo-nb__h">
            {%- if mode == 'preorder' -%}
              {{ section.settings.preorder_heading | default: 'Pre-order this drop.' }}
            {%- else -%}
              {{ section.settings.notify_heading | default: 'Get notified when back.' }}
            {%- endif -%}
          </p>
          <p class="modblo-nb__sub" data-modblo-nb-variant-sub>
            {%- if mode == 'preorder' -%}
              {{ section.settings.preorder_sub | default: 'Reserve your size, ships first when stock lands.' }}
            {%- else -%}
              {{ section.settings.notify_sub | default: 'We will email you the moment this is back.' }}
            {%- endif -%}
          </p>
        </div>
      </header>

      {%- if mode == 'preorder' and section.settings.expected_date != blank -%}
        <div class="modblo-nb__eta">
          <span class="modblo-nb__eta-label">Expected ship date</span>
          <strong class="modblo-nb__eta-date">{{ section.settings.expected_date }}</strong>
        </div>
      {%- endif -%}

      {%- form 'customer', class: 'modblo-nb__form', novalidate: true, data-modblo-nb-form: '' -%}
        <input type="hidden" name="contact[tags]" value="" data-modblo-nb-tag>
        <input type="hidden" name="contact[accepts_marketing]" value="true">

        <div class="modblo-nb__field">
          <input
            type="email"
            name="contact[email]"
            placeholder="{{ section.settings.placeholder | default: 'Email address' }}"
            required
            aria-label="Email address">
          <button type="submit" class="modblo-nb__submit">
            {%- if mode == 'preorder' -%}
              {{ section.settings.preorder_cta | default: 'Reserve mine' }}
            {%- else -%}
              {{ section.settings.notify_cta | default: 'Notify me' }}
            {%- endif -%}
          </button>
        </div>

        {%- if section.settings.consent_text != blank -%}
          <p class="modblo-nb__consent">{{ section.settings.consent_text }}</p>
        {%- endif -%}
      {%- endform -%}
    </div>

    <div class="modblo-nb__view modblo-nb__view--success" data-modblo-nb-view="success" hidden>
      <span class="modblo-nb__check" aria-hidden="true">
        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M20 6 9 17l-5-5"/>
        </svg>
      </span>
      <div>
        <p class="modblo-nb__h">{{ section.settings.success_heading | default: "You're on the list." }}</p>
        <p class="modblo-nb__sub">{{ section.settings.success_sub | default: 'We will email you the moment this restocks.' }}</p>
      </div>
    </div>
  </div>
</div>

<style>
  .modblo-nb__panel {
    background: var(--modblo-nb-bg, color-mix(in oklab, var(--modblo-nb-fg, #0b0b0c) 4%, transparent));
    color: var(--modblo-nb-fg, #0b0b0c);
    border: 1px solid color-mix(in oklab, var(--modblo-nb-fg, #0b0b0c) 10%, transparent);
    border-radius: 14px;
    padding: 18px;
  }
  .modblo-nb__panel[hidden] { display: none; }

  .modblo-nb__view { display: block; }
  .modblo-nb__view[hidden] { display: none; }
  .modblo-nb__view--success { display: flex; align-items: center; gap: 14px; }

  .modblo-nb__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
  .modblo-nb__icon {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
    background: color-mix(in oklab, var(--modblo-nb-accent, #6366f1) 12%, transparent);
    color: var(--modblo-nb-accent, #6366f1);
    display: grid; place-items: center;
  }
  .modblo-nb__h { font-size: 14px; font-weight: 600; margin: 0 0 2px; }
  .modblo-nb__sub { font-size: 13px; opacity: .65; margin: 0; line-height: 1.4; }

  .modblo-nb__eta {
    display: flex; align-items: center; justify-content: space-between;
    background: color-mix(in oklab, var(--modblo-nb-fg, #0b0b0c) 5%, transparent);
    border-radius: 10px;
    padding: 10px 14px; margin-bottom: 14px;
    font-size: 13px;
  }
  .modblo-nb__eta-label { opacity: .65; }
  .modblo-nb__eta-date { font-weight: 600; }

  .modblo-nb__field { display: flex; gap: 8px; flex-wrap: wrap; }
  .modblo-nb__field input {
    flex: 1; min-width: 180px;
    background: var(--modblo-nb-bg, #fff); color: inherit;
    border: 1px solid color-mix(in oklab, var(--modblo-nb-fg, #0b0b0c) 14%, transparent);
    border-radius: 10px;
    padding: 11px 12px; font-size: 14px;
  }
  .modblo-nb__field input:focus { outline: none; border-color: var(--modblo-nb-accent, #6366f1); }
  .modblo-nb__submit {
    background: var(--modblo-nb-accent, #6366f1); color: #fff;
    border: 0; border-radius: 10px;
    padding: 11px 18px; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: opacity .2s;
  }
  .modblo-nb__submit:hover:not([disabled]) { opacity: .92; }
  .modblo-nb__submit[disabled] { opacity: .5; cursor: not-allowed; }

  .modblo-nb__consent { font-size: 11px; opacity: .55; margin: 8px 0 0; line-height: 1.4; }

  .modblo-nb__check {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
    background: color-mix(in oklab, #16a34a 15%, transparent);
    color: #16a34a;
    display: grid; place-items: center;
  }
</style>

<script>
  (function () {
    var root = document.querySelector('[data-modblo-nb][data-section-id="{{ section.id }}"]');
    if (!root) return;

    var mode = root.dataset.mode;
    var handle = root.dataset.productHandle;
    var panel = root.querySelector('[data-modblo-nb-panel]');
    var formView = root.querySelector('[data-modblo-nb-view="form"]');
    var successView = root.querySelector('[data-modblo-nb-view="success"]');
    var subEl = root.querySelector('[data-modblo-nb-variant-sub]');
    var tagInput = root.querySelector('[data-modblo-nb-tag]');
    var form = root.querySelector('[data-modblo-nb-form]');
    var subOriginal = subEl.textContent;

    var variants = [];
    try {
      variants = JSON.parse(root.querySelector('[data-modblo-nb-variants]').textContent);
    } catch (e) { return; }

    function currentVariantId() {
      var url = new URL(window.location.href);
      var v = url.searchParams.get('variant');
      if (v) return parseInt(v, 10);
      // Fallback to selectedVariant from theme JS, or first variant
      return variants[0] ? variants[0].id : null;
    }

    function update() {
      var id = currentVariantId();
      var variant = variants.find(function (v) { return v.id === id; });
      if (!variant) { panel.hidden = true; return; }

      // Notify mode: only show when sold out
      // Pre-order mode: always show
      var shouldShow = mode === 'preorder' || !variant.available;
      panel.hidden = !shouldShow;

      if (shouldShow) {
        tagInput.value = (mode === 'preorder' ? 'preorder' : 'notify') + ':' + handle + ':' + variant.id;
        if (mode === 'notify') {
          subEl.textContent = '"' + variant.title + '" is sold out. ' + subOriginal;
        }
      }

      // Reset to form view if variant changed
      formView.hidden = false;
      successView.hidden = true;
    }

    update();

    // Listen for variant changes (URL change via theme variant picker)
    document.addEventListener('variant:changed', update);
    window.addEventListener('popstate', update);
    var lastSearch = window.location.search;
    setInterval(function () {
      if (window.location.search !== lastSearch) {
        lastSearch = window.location.search;
        update();
      }
    }, 500);

    // Form submission
    form.addEventListener('submit', function (e) {
      e.preventDefault();
      var btn = form.querySelector('button[type="submit"]');
      var original = btn.textContent;
      btn.disabled = true; btn.textContent = 'Sending...';

      var fd = new FormData(form);
      var body = new URLSearchParams();
      fd.forEach(function (v, k) { body.append(k, v); });

      fetch('/contact', { method: 'POST', body: body, headers: { 'Accept': 'application/json' } })
        .then(function () {
          formView.hidden = true;
          successView.hidden = false;
        })
        .catch(function () {
          btn.disabled = false; btn.textContent = original;
        });
    });
  })();
</script>
{%- endif -%}

{% schema %}
{
  "name": "Notify When Back",
  "tag": "section",
  "settings": [
    { "type": "header", "content": "Mode" },
    { "type": "select", "id": "mode", "label": "Mode", "default": "notify",
      "options": [
        { "value": "notify", "label": "Notify when back (sold-out variants)" },
        { "value": "preorder", "label": "Pre-order (always visible)" }
      ]
    },
    { "type": "product", "id": "product", "label": "Product (leave blank to auto-bind on PDP)" },
    { "type": "header", "content": "Notify mode copy" },
    { "type": "text", "id": "notify_heading", "label": "Heading", "default": "Get notified when back." },
    { "type": "textarea", "id": "notify_sub", "label": "Subheading", "default": "We will email you the moment this is back." },
    { "type": "text", "id": "notify_cta", "label": "CTA label", "default": "Notify me" },
    { "type": "header", "content": "Pre-order mode copy" },
    { "type": "text", "id": "preorder_heading", "label": "Heading", "default": "Pre-order this drop." },
    { "type": "textarea", "id": "preorder_sub", "label": "Subheading", "default": "Reserve your size, ships first when stock lands." },
    { "type": "text", "id": "preorder_cta", "label": "CTA label", "default": "Reserve mine" },
    { "type": "text", "id": "expected_date", "label": "Expected ship date", "info": "e.g. Mid-June 2026" },
    { "type": "header", "content": "Form" },
    { "type": "text", "id": "placeholder", "label": "Email placeholder", "default": "Email address" },
    { "type": "text", "id": "consent_text", "label": "Consent text",
      "default": "By submitting, you agree to receive marketing emails. Unsubscribe anytime." },
    { "type": "header", "content": "Success state" },
    { "type": "text", "id": "success_heading", "label": "Success heading", "default": "You're on the list." },
    { "type": "textarea", "id": "success_sub", "label": "Success subheading",
      "default": "We will email you the moment this restocks." },
    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "bg", "label": "Background", "default": "" },
    { "type": "color", "id": "fg", "label": "Foreground", "default": "#0b0b0c" },
    { "type": "color", "id": "accent", "label": "Accent", "default": "#6366f1" }
  ],
  "presets": [{ "name": "Notify When Back" }]
}
{% endschema %}