Thank You Page Upsell

{%- comment -%}
  modblo. Thank You Page Upsell
  Replaces ReConvert / Zipify OCU / AfterSell post-purchase upsells.
  Renders on the order template (template = order) with:
    - Personalized thank-you header (first name, order number)
    - Order recap (line items + total)
    - Recommended-product carousel from a chosen collection
       (excludes products already in the order)
    - Optional refer-a-friend block with copyable referral link
    - Social share buttons (X, Facebook, Pinterest)
  Drop into customers/order.json or order-confirmation.json template.
{%- endcomment -%}

{%- if customer != blank or order != blank -%}
{%- assign rec_collection = collections[section.settings.rec_collection] -%}

<section class="modblo-ty" data-modblo-ty
         data-section-id="{{ section.id }}"
         style="--modblo-ty-bg: {{ section.settings.bg }};
                --modblo-ty-fg: {{ section.settings.fg }};
                --modblo-ty-accent: {{ section.settings.accent }};">
  <div class="modblo-ty__inner page-width">

    {%- comment -%} Personal hello + order summary {%- endcomment -%}
    <header class="modblo-ty__head">
      <div class="modblo-ty__check" aria-hidden="true">
        <svg viewBox="0 0 32 32" width="40" height="40" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M27 8 12 23l-7-7"/>
        </svg>
      </div>
      <h1 class="modblo-ty__h">
        Thanks{% if order.customer.first_name != blank %}, {{ order.customer.first_name }}{% endif %}.
      </h1>
      <p class="modblo-ty__sub">
        {{ section.settings.confirmation_msg | default: 'Order confirmed. We sent a receipt to your email.' }}
        {%- if order.name != blank -%}
          <br>Order <strong>{{ order.name }}</strong>{% if order.created_at != blank %} — {{ order.created_at | date: '%b %-d, %Y' }}{% endif %}
        {%- endif -%}
      </p>
    </header>

    {%- if order.line_items.size > 0 -%}
      <div class="modblo-ty__order">
        <p class="modblo-ty__order-label">Your order</p>
        <ul class="modblo-ty__order-list">
          {%- for item in order.line_items -%}
            <li class="modblo-ty__order-item">
              {%- if item.image -%}
                {{ item | image_url: width: 120 | image_tag:
                  loading: 'lazy', widths: '60,120', sizes: '60px',
                  class: 'modblo-ty__order-img' }}
              {%- endif -%}
              <div class="modblo-ty__order-body">
                <p class="modblo-ty__order-title">{{ item.title }}</p>
                <p class="modblo-ty__order-meta">Qty {{ item.quantity }}</p>
              </div>
              <p class="modblo-ty__order-price">{{ item.line_price | money }}</p>
            </li>
          {%- endfor -%}
        </ul>
        <div class="modblo-ty__order-total">
          <span>Total</span>
          <strong>{{ order.total_price | money }}</strong>
        </div>
      </div>
    {%- endif -%}

    {%- if rec_collection.products.size > 0 -%}
      {%- comment -%} Build a set of bought handles to exclude {%- endcomment -%}
      {%- assign bought = '' -%}
      {%- for item in order.line_items -%}
        {%- assign bought = bought | append: item.product.handle | append: ',' -%}
      {%- endfor -%}

      <div class="modblo-ty__rec">
        <header class="modblo-ty__rec-head">
          <p class="modblo-ty__rec-eyebrow">{{ section.settings.rec_eyebrow | default: 'Pair it with' }}</p>
          <h2 class="modblo-ty__rec-h">{{ section.settings.rec_heading | default: 'Customers also added these.' }}</h2>
        </header>
        <div class="modblo-ty__rec-row">
          {%- for product in rec_collection.products limit: 8 -%}
            {%- unless bought contains product.handle -%}
              {%- assign rec_var = product.selected_or_first_available_variant -%}
              <article class="modblo-ty__rec-card">
                <a href="{{ product.url }}">
                  {%- if product.featured_image -%}
                    {{ product.featured_image | image_url: width: 280 | image_tag:
                      loading: 'lazy', widths: '140,280', sizes: '140px',
                      class: 'modblo-ty__rec-img' }}
                  {%- endif -%}
                </a>
                <p class="modblo-ty__rec-title">{{ product.title }}</p>
                <p class="modblo-ty__rec-price">{{ rec_var.price | money }}</p>
                <form action="/cart/add" method="post" class="modblo-ty__rec-form">
                  <input type="hidden" name="id" value="{{ rec_var.id }}">
                  <button type="submit" class="modblo-ty__rec-add" {% unless rec_var.available %}disabled{% endunless %}>
                    {%- if rec_var.available -%}+ Add to cart{%- else -%}Sold out{%- endif -%}
                  </button>
                </form>
              </article>
            {%- endunless -%}
          {%- endfor -%}
        </div>
      </div>
    {%- endif -%}

    {%- if section.settings.show_referral -%}
      <div class="modblo-ty__refer">
        <span class="modblo-ty__refer-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
            <path d="m8.6 13.5 6.8 4M15.4 6.5l-6.8 4"/>
          </svg>
        </span>
        <div class="modblo-ty__refer-body">
          <p class="modblo-ty__refer-h">{{ section.settings.referral_heading | default: 'Give 15%, get 15%.' }}</p>
          <p class="modblo-ty__refer-sub">{{ section.settings.referral_sub | default: 'Share your link, friends get 15% off, you get 15% back.' }}</p>
        </div>
        <div class="modblo-ty__refer-link">
          <input type="text" readonly value="{{ shop.url }}/?ref={% if order.name %}{{ order.name | replace: '#', '' }}{% else %}friend{% endif %}" data-modblo-ty-ref>
          <button type="button" data-modblo-ty-copy>Copy</button>
        </div>
      </div>
    {%- endif -%}

    {%- if section.settings.show_share -%}
      <div class="modblo-ty__share">
        <span class="modblo-ty__share-label">Share what you ordered:</span>
        <a href="https://twitter.com/intent/tweet?text={{ section.settings.share_text | default: 'Just ordered from' | url_encode }}%20{{ shop.name | url_encode }}&url={{ shop.url | url_encode }}"
           target="_blank" rel="noopener" class="modblo-ty__share-btn" aria-label="Share on X">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M18.244 2H21l-6.52 7.45L22 22h-6.27l-4.91-6.42L5.21 22H2.45l6.97-7.96L2 2h6.41l4.44 5.87L18.244 2zm-1.1 18h1.66L7.94 4h-1.7l10.9 16z"/></svg>
        </a>
        <a href="https://www.facebook.com/sharer/sharer.php?u={{ shop.url | url_encode }}"
           target="_blank" rel="noopener" class="modblo-ty__share-btn" aria-label="Share on Facebook">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M22 12a10 10 0 1 0-11.6 9.9v-7H8v-2.9h2.4V9.7c0-2.4 1.5-3.7 3.6-3.7l2 .2v2.4h-1.2c-1.2 0-1.6.7-1.6 1.5V12H16l-.5 2.9h-2.1v7A10 10 0 0 0 22 12z"/></svg>
        </a>
        <a href="https://pinterest.com/pin/create/button/?url={{ shop.url | url_encode }}"
           target="_blank" rel="noopener" class="modblo-ty__share-btn" aria-label="Share on Pinterest">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 2a10 10 0 0 0-3.6 19.3c0-.8 0-1.7.2-2.5.2-.9 1.4-5.7 1.4-5.7s-.4-.7-.4-1.7c0-1.6 1-2.8 2.1-2.8 1 0 1.5.8 1.5 1.7 0 1-.7 2.6-1 4 0 1.2.6 2.2 1.8 2.2 2.1 0 3.7-2.2 3.7-5.4 0-2.8-2-4.8-5-4.8a5.2 5.2 0 0 0-5.4 5.2c0 1 .4 2.2.9 2.8.1.1.1.2.1.3l-.4 1.5c0 .2-.2.3-.4.2-1.4-.7-2.3-2.7-2.3-4.4 0-3.6 2.6-6.9 7.5-6.9 3.9 0 7 2.8 7 6.6 0 3.9-2.5 7.1-5.9 7.1-1.2 0-2.3-.6-2.6-1.3l-.7 2.7c-.3 1-1 2.2-1.5 3A10 10 0 1 0 12 2z"/></svg>
        </a>
      </div>
    {%- endif -%}

  </div>
</section>

<style>
  .modblo-ty { background: var(--modblo-ty-bg, #fff); color: var(--modblo-ty-fg, #0b0b0c); padding: clamp(48px, 6vw, 96px) 0; }
  .modblo-ty__inner { max-width: 720px; margin: 0 auto; padding: 0 24px; }

  .modblo-ty__head { text-align: center; margin-bottom: 40px; }
  .modblo-ty__check {
    width: 72px; height: 72px; border-radius: 50%;
    background: color-mix(in oklab, #16a34a 15%, transparent);
    color: #16a34a;
    display: grid; place-items: center;
    margin: 0 auto 20px;
  }
  .modblo-ty__h { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.02em; margin: 0 0 12px; }
  .modblo-ty__sub { font-size: 15px; opacity: .7; line-height: 1.5; margin: 0; }
  .modblo-ty__sub strong { color: var(--modblo-ty-fg, #0b0b0c); font-weight: 600; }

  .modblo-ty__order {
    background: color-mix(in oklab, var(--modblo-ty-fg) 4%, transparent);
    border-radius: 16px; padding: 20px 22px; margin-bottom: 32px;
  }
  .modblo-ty__order-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
    opacity: .6; margin: 0 0 14px;
  }
  .modblo-ty__order-list { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 12px; }
  .modblo-ty__order-item { display: flex; align-items: center; gap: 12px; }
  .modblo-ty__order-img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
  .modblo-ty__order-body { flex: 1; min-width: 0; }
  .modblo-ty__order-title { font-size: 14px; font-weight: 600; margin: 0 0 2px; line-height: 1.3; }
  .modblo-ty__order-meta { font-size: 12px; opacity: .6; margin: 0; }
  .modblo-ty__order-price { font-size: 14px; font-weight: 600; margin: 0; }
  .modblo-ty__order-total {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-top: 14px; border-top: 1px solid color-mix(in oklab, var(--modblo-ty-fg) 8%, transparent);
    font-size: 14px;
  }
  .modblo-ty__order-total strong { font-size: 18px; font-weight: 700; }

  .modblo-ty__rec { margin-bottom: 32px; }
  .modblo-ty__rec-head { text-align: center; margin-bottom: 20px; }
  .modblo-ty__rec-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 700; color: var(--modblo-ty-accent, #6366f1); margin: 0 0 8px; }
  .modblo-ty__rec-h { font-size: 22px; letter-spacing: -.02em; margin: 0; }

  .modblo-ty__rec-row {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .modblo-ty__rec-card {
    background: color-mix(in oklab, var(--modblo-ty-fg) 3%, transparent);
    border-radius: 12px; padding: 12px;
    text-align: left;
  }
  .modblo-ty__rec-img {
    width: 100%; aspect-ratio: 1; object-fit: cover;
    border-radius: 8px; margin-bottom: 10px;
  }
  .modblo-ty__rec-title { font-size: 13px; font-weight: 600; margin: 0 0 4px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .modblo-ty__rec-price { font-size: 13px; opacity: .7; margin: 0 0 8px; }
  .modblo-ty__rec-form { margin: 0; }
  .modblo-ty__rec-add {
    width: 100%; padding: 7px;
    background: var(--modblo-ty-fg, #0b0b0c); color: var(--modblo-ty-bg, #fff);
    border: 0; border-radius: 6px;
    font-size: 11px; font-weight: 600; cursor: pointer;
    transition: opacity .2s;
  }
  .modblo-ty__rec-add:hover:not([disabled]) { opacity: .92; }
  .modblo-ty__rec-add[disabled] { opacity: .4; cursor: not-allowed; }

  .modblo-ty__refer {
    display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
    background: linear-gradient(135deg,
      color-mix(in oklab, var(--modblo-ty-accent, #6366f1) 8%, transparent) 0%,
      color-mix(in oklab, var(--modblo-ty-accent, #6366f1) 3%, transparent) 100%);
    border: 1px solid color-mix(in oklab, var(--modblo-ty-accent, #6366f1) 20%, transparent);
    border-radius: 16px; padding: 18px 22px; margin-bottom: 28px;
  }
  .modblo-ty__refer-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: color-mix(in oklab, var(--modblo-ty-accent, #6366f1) 12%, transparent);
    color: var(--modblo-ty-accent, #6366f1);
    display: grid; place-items: center; flex-shrink: 0;
  }
  .modblo-ty__refer-h { font-size: 15px; font-weight: 600; margin: 0 0 2px; }
  .modblo-ty__refer-sub { font-size: 13px; opacity: .7; margin: 0; line-height: 1.4; }
  .modblo-ty__refer-link {
    display: flex; align-items: center; gap: 6px;
    background: var(--modblo-ty-bg, #fff);
    border: 1px solid color-mix(in oklab, var(--modblo-ty-fg) 12%, transparent);
    border-radius: 10px; padding: 4px 4px 4px 12px;
    grid-column: 1 / -1;
  }
  .modblo-ty__refer-link input {
    flex: 1; background: transparent; color: inherit;
    border: 0; padding: 8px 0; font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    min-width: 0;
  }
  .modblo-ty__refer-link button {
    background: var(--modblo-ty-accent, #6366f1); color: #fff;
    border: 0; padding: 8px 14px; border-radius: 8px;
    font-size: 12px; font-weight: 600; cursor: pointer;
    flex-shrink: 0;
  }

  .modblo-ty__share { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; }
  .modblo-ty__share-label { font-size: 12px; opacity: .6; }
  .modblo-ty__share-btn {
    width: 32px; height: 32px; border-radius: 50%;
    background: color-mix(in oklab, var(--modblo-ty-fg) 6%, transparent);
    color: var(--modblo-ty-fg);
    display: grid; place-items: center; text-decoration: none;
    transition: background .2s, transform .15s;
  }
  .modblo-ty__share-btn:hover { background: color-mix(in oklab, var(--modblo-ty-fg) 12%, transparent); transform: translateY(-1px); }

  @media (max-width: 540px) {
    .modblo-ty__refer { grid-template-columns: auto 1fr; }
  }
</style>

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

    // Copy referral link
    var copyBtn = root.querySelector('[data-modblo-ty-copy]');
    var refInput = root.querySelector('[data-modblo-ty-ref]');
    if (copyBtn && refInput) {
      copyBtn.addEventListener('click', function () {
        navigator.clipboard.writeText(refInput.value);
        var orig = copyBtn.textContent;
        copyBtn.textContent = '✓ Copied';
        setTimeout(function () { copyBtn.textContent = orig; }, 1600);
      });
    }

    // Cart-AJAX submit on each rec form
    root.querySelectorAll('.modblo-ty__rec-form').forEach(function (form) {
      form.addEventListener('submit', function (e) {
        e.preventDefault();
        var btn = form.querySelector('button');
        var orig = btn.textContent;
        btn.disabled = true; btn.textContent = 'Adding...';
        fetch('/cart/add.js', {
          method: 'POST', headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ id: form.querySelector('[name="id"]').value, quantity: 1 }),
        }).then(function () {
          btn.textContent = '✓ Added';
          document.dispatchEvent(new CustomEvent('cart:updated'));
          setTimeout(function () { btn.disabled = false; btn.textContent = orig; }, 1600);
        });
      });
    });
  })();
</script>
{%- endif -%}

{% schema %}
{
  "name": "Thank You Page Upsell",
  "tag": "section",
  "settings": [
    { "type": "header", "content": "Confirmation" },
    { "type": "textarea", "id": "confirmation_msg", "label": "Confirmation message",
      "default": "Order confirmed. We sent a receipt to your email." },
    { "type": "header", "content": "Recommendations" },
    { "type": "collection", "id": "rec_collection", "label": "Recommendation collection",
      "info": "Products from this collection (excluding what they bought) appear as cross-sells." },
    { "type": "text", "id": "rec_eyebrow", "label": "Recommendations eyebrow", "default": "Pair it with" },
    { "type": "text", "id": "rec_heading", "label": "Recommendations heading", "default": "Customers also added these." },
    { "type": "header", "content": "Refer-a-friend" },
    { "type": "checkbox", "id": "show_referral", "label": "Show refer-a-friend block", "default": true },
    { "type": "text", "id": "referral_heading", "label": "Referral heading", "default": "Give 15%, get 15%." },
    { "type": "textarea", "id": "referral_sub", "label": "Referral subtext",
      "default": "Share your link, friends get 15% off, you get 15% back." },
    { "type": "header", "content": "Social share" },
    { "type": "checkbox", "id": "show_share", "label": "Show social share buttons", "default": true },
    { "type": "text", "id": "share_text", "label": "Share copy template", "default": "Just ordered from" },
    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "bg", "label": "Background", "default": "#ffffff" },
    { "type": "color", "id": "fg", "label": "Foreground", "default": "#0b0b0c" },
    { "type": "color", "id": "accent", "label": "Accent", "default": "#6366f1" }
  ],
  "presets": [{ "name": "Thank You Page Upsell" }]
}
{% endschema %}