Gift with purchase in the cart

{%- comment -%}
  CartSella gift detection. Reads the current `_cs_role` and the legacy
  `_cartsella_role`, because a shopper on a stale tab still writes the old name.
{%- endcomment -%}
{%- assign cs_role = item.properties['_cs_role'] | default: item.properties['_cartsella_role'] -%}
{%- assign cs_raw = item.properties['_cs'] | default: item.properties['_cartsella_subtype'] -%}
{%- assign cs_parts = cs_raw | split: '|' | first | split: ':' -%}
{%- assign cs_subtype = cs_parts | last -%}

{%- if cs_role contains 'reward' and cs_subtype == 'gift_with_purchase' -%}
  {%- assign is_gift = true -%}
{%- else -%}
  {%- assign is_gift = false -%}
{%- endif -%}

<div class="cart-item {% if is_gift %}cart-item--gift{% endif %}">
  <a href="{{ item.url }}">{{ item.product.title }}</a>

  {%- if is_gift -%}
    <span class="cart-item__gift-badge">Gift</span>
    <span class="cart-item__gift-price">Free</span>
  {%- else -%}
    <span class="cart-item__price">{{ item.final_line_price | money }}</span>
  {%- endif -%}

  {%- if is_gift -%}
    {%- comment -%} No stepper: CartSella owns this line's quantity. {%- endcomment -%}
    <span class="cart-item__gift-qty">Qty {{ item.quantity }}</span>
  {%- else -%}
    <input
      type="number"
      name="updates[{{ item.key }}]"
      value="{{ item.quantity }}"
      min="0"
    >
  {%- endif -%}
</div>

/** Comma-separated helper that also accepts an array value. */
const csv = (value) =>
  (Array.isArray(value) ? value : String(value ?? "").split(","))
    .map((v) => String(v).trim())
    .filter(Boolean);

/** Entities on a line: `_cs`, falling back to the legacy parallel lists. */
function csEntities(properties = {}) {
  const raw = String(properties._cs || "").trim();
  if (raw) {
    const parsed = raw
      .split("|")
      .map((entry) => entry.split(":"))
      .filter(([id]) => id)
      .map(([id, type, subtype]) => ({
        id,
        type: type || "offer",
        subtype: subtype || type || "offer",
      }));
    if (parsed.length > 0) return parsed;
  }
  const ids = csv(properties._cartsella_id);
  const types = csv(properties._cartsella_type);
  const subtypes = csv(properties._cartsella_subtype);
  return ids.map((id, i) => ({
    id,
    type: types[i] || "offer",
    subtype: subtypes[i] || types[i] || "offer",
  }));
}

const csRoles = (properties = {}) =>
  csv(properties._cs_role ?? properties._cartsella_role);

const isReward = (line) => csRoles(line.properties).includes("reward");

const giftForVariantId = (line) =>
  String(
    line.properties?._cs_gift_for ??
      line.properties?._cartsella_gift_for ??
      "",
  ).trim();

/**
 * For each gift line: the offer that produced it and the trigger line it
 * belongs to (null for spend-threshold gifts, which have no trigger product).
 */
export function describeGifts(cart) {
  const lines = cart.items || [];

  return lines
    .filter(
      (line) =>
        isReward(line) &&
        csEntities(line.properties).some(
          (e) => e.subtype === "gift_with_purchase",
        ),
    )
    .map((gift) => {
      const offerId =
        csEntities(gift.properties).find(
          (e) => e.subtype === "gift_with_purchase",
        )?.id ?? "";

      // 1. Explicit tag: the exact trigger variant that earned this gift.
      //    Only present when the offer has 2+ trigger products in the cart.
      const taggedVariant = giftForVariantId(gift);
      let trigger =
        taggedVariant &&
        lines.find(
          (line) =>
            !isReward(line) && String(line.variant_id) === taggedVariant,
        );

      // 2. Otherwise, any non-reward line tagged with this offer id.
      if (!trigger && offerId) {
        trigger = lines.find(
          (line) =>
            !isReward(line) &&
            csv(line.properties?._trigger_offer_id).includes(offerId),
        );
      }

      return { gift, offerId, trigger: trigger || null };
    });
}

const cart = await fetch("/cart.js", { credentials: "same-origin" }).then((r) =>
  r.json(),
);
console.table(
  describeGifts(cart).map(({ gift, offerId, trigger }) => ({
    gift: gift.product_title,
    offerId,
    triggeredBy: trigger ? trigger.product_title : "(spend threshold)",
  })),
);