Flux Next

#brxe-zfbdco .yn-instock-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 6px 0 2px;
  padding: 6px 0;
  font-size: 1.4rem;
}

#brxe-zfbdco .yn-instock-toggle__label {
  font-weight: 500;
}

#brxe-zfbdco .yn-instock-toggle__switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex: 0 0 auto;
}

#brxe-zfbdco .yn-instock-toggle__switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

#brxe-zfbdco .yn-instock-toggle__slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #c8c8c8;
  transition: 0.2s;
  border-radius: 999px;
}

#brxe-zfbdco .yn-instock-toggle__slider::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  transition: 0.2s;
  border-radius: 50%;
}

#brxe-zfbdco .yn-instock-toggle__switch input:checked + .yn-instock-toggle__slider {
  background: #a6ce39;
}

#brxe-zfbdco .yn-instock-toggle__switch input:checked + .yn-instock-toggle__slider::before {
  transform: translateX(20px);
}

#brxe-zfbdco .yn-variation-hidden,
#brxe-umlvfb .yn-variation-hidden,
.variations_form .yn-variation-hidden {
  display: none !important;
}

(function initYnInStockToggle() {
  if (!window.jQuery) {
    setTimeout(initYnInStockToggle, 60);
    return;
  }

  window.jQuery(function ($) {
    const $form = $('.variations_form').first();
    const $mount = $('#brxe-zfbdco');

    if (!$form.length || !$mount.length || $mount.find('.yn-instock-toggle').length) {
      return;
    }

    const toggleId = 'yn-instock-toggle-' + Math.random().toString(36).slice(2, 8);
    const modeLabel = {
      backorder: 'Tilattavissa',
      instock: 'Varastossa'
    };

    let applyTimer = null;
    let suppressApplyEvents = false;

    function toNumber(value) {
      const number = Number(value);
      return Number.isFinite(number) ? number : null;
    }

    function getVariations() {
      const list = $form.data('product_variations');
      return Array.isArray(list) ? list : [];
    }

    function getSelections() {
      const selections = {};

      $form.find('select[name^="attribute_"]').each(function () {
        const $select = $(this);
        const attrName = String($select.attr('name') || '');

        if (!attrName) {
          return;
        }

        selections[attrName] = String($select.val() || '');
      });

      return selections;
    }

    function hasPositiveStock(variation) {
      if (!variation || typeof variation !== 'object') {
        return false;
      }

      const managesStock = variation.yn_manage_stock === true || variation.yn_manage_stock === 'yes' || variation.yn_manage_stock === 1 || variation.yn_manage_stock === '1';
      const stockQty = toNumber(variation.yn_stock_quantity);

      if (managesStock && stockQty !== null) {
        return stockQty > 0;
      }

      if (stockQty !== null) {
        return stockQty > 0;
      }

      return variation.is_in_stock === true;
    }

    function isBackorderAllowed(variation) {
      if (!variation || typeof variation !== 'object') {
        return false;
      }

      if (typeof variation.backorders_allowed !== 'undefined') {
        return !!variation.backorders_allowed;
      }

      const backorders = String(variation.backorders || '').toLowerCase();
      return backorders === 'yes' || backorders === 'notify';
    }

    function getMode() {
      return $toggle.find('input').is(':checked') ? 'instock' : 'backorder';
    }

    function isVariationAllowedForMode(variation, mode) {
      if (mode === 'instock') {
        return hasPositiveStock(variation);
      }

      return isBackorderAllowed(variation);
    }

    function variationMatchesSelections(variation, selections, exceptAttrName) {
      const attrs = variation && variation.attributes ? variation.attributes : {};

      for (const attrName in selections) {
        if (!Object.prototype.hasOwnProperty.call(selections, attrName)) {
          continue;
        }

        if (attrName === exceptAttrName) {
          continue;
        }

        const selectedValue = String(selections[attrName] || '');
        if (!selectedValue) {
          continue;
        }

        const variationValue = String(attrs[attrName] || '');
        if (variationValue && variationValue !== selectedValue) {
          return false;
        }
      }

      return true;
    }

    function optionMatchesMode(variations, attrName, attrValue, selections, mode) {
      for (let i = 0; i < variations.length; i += 1) {
        const variation = variations[i];
        if (!isVariationAllowedForMode(variation, mode)) {
          continue;
        }

        const attrs = variation && variation.attributes ? variation.attributes : {};
        const variationValue = String(attrs[attrName] || '');

        if (variationValue && variationValue !== attrValue) {
          continue;
        }

        if (variationMatchesSelections(variation, selections, attrName)) {
          return true;
        }
      }

      return false;
    }

    function getRowField($field) {
      const $row = $field.closest('tr');
      if ($row.length) {
        return $row;
      }

      const $valueCell = $field.closest('td.value, .value');
      if ($valueCell.length) {
        return $valueCell.add($valueCell.prev('td.label, .label'));
      }

      return $field.closest('.variations__row, .variation-row, .variation');
    }

    function setGroupVisibility($field, hasVisible) {
      const $target = getRowField($field);

      if ($target.length) {
        $target.toggle(hasVisible);
        return;
      }

      $field.parent().toggle(hasVisible);
    }

    function clearCustomSelectFiltering() {
      $form.find('select[name^="attribute_"] option[data-yn-hidden="1"]').each(function () {
        $(this).prop('hidden', false).prop('disabled', false).removeAttr('data-yn-hidden');
      });
    }

    function clearCustomSwatchFiltering() {
      $form.find('.yn-variation-hidden').removeClass('yn-variation-hidden');
    }

    function applySelectFiltering(mode) {
      const variations = getVariations();
      const selections = getSelections();

      $form.find('select[name^="attribute_"]').each(function () {
        const $select = $(this);
        const attrName = String($select.attr('name') || '');
        const selectedValue = String($select.val() || '');
        let visibleCount = 0;
        let selectedStillVisible = selectedValue === '';

        if (!attrName) {
          return;
        }

        $select.find('option').each(function () {
          const $option = $(this);
          const optionValue = String($option.val() || '');

          if (!optionValue) {
            $option.prop('hidden', false).removeAttr('data-yn-hidden');
            return;
          }

          const show = optionMatchesMode(variations, attrName, optionValue, selections, mode);
          $option.prop('hidden', !show);

          if (show) {
            visibleCount += 1;
            $option.prop('disabled', false).removeAttr('data-yn-hidden');
          } else {
            $option.prop('disabled', true).attr('data-yn-hidden', '1');
          }

          if (optionValue === selectedValue && show) {
            selectedStillVisible = true;
          }
        });

        setGroupVisibility($select, visibleCount > 0);

        if (selectedValue && !selectedStillVisible) {
          $select.val('').trigger('change');
        }
      });
    }

    function getSelectForSwatchList($list) {
      const attrNameFromInput = String($list.find('input.variation-select[data-attribute_name]').first().attr('data-attribute_name') || '');

      if (attrNameFromInput) {
        const $matched = $form.find('select[name^="attribute_"]').filter(function () {
          return String($(this).attr('name') || '') === attrNameFromInput;
        }).first();

        if ($matched.length) {
          return $matched;
        }
      }

      return $();
    }

    function syncSwatches() {
      $form.find('ul.bricks-variation-swatches').each(function () {
        const $list = $(this);
        const $select = getSelectForSwatchList($list);

        if (!$select.length) {
          return;
        }

        const selectedValue = String($select.val() || '');
        let selectedHidden = false;
        let visibleCount = 0;

        $list.children('li[data-value]').each(function () {
          const $item = $(this);
          const swatchValue = String($item.attr('data-value') || '');

          const $option = $select.find('option').filter(function () {
            return String($(this).val() || '') === swatchValue;
          }).first();

          const shouldHide = $option.length && $option.prop('hidden');
          $item.toggleClass('yn-variation-hidden', shouldHide);

          if (!shouldHide) {
            visibleCount += 1;
          }

          if (swatchValue === selectedValue && shouldHide) {
            selectedHidden = true;
          }
        });

        setGroupVisibility($list, visibleCount > 0);

        if (selectedHidden) {
          $select.val('').trigger('change');
        }
      });
    }

    function updateToggleLabel() {
      const mode = getMode();
      const labelText = modeLabel[mode] || modeLabel.backorder;
      $toggle.find('.yn-instock-toggle__label').text(labelText);
      $toggle.attr('data-mode', mode);
    }

    function autoSelectFirstVisibleInStockValues(mode) {
      if (mode !== 'instock') {
        return false;
      }

      let changed = false;

      $form.find('select[name^="attribute_"]').each(function () {
        const $select = $(this);
        const currentValue = String($select.val() || '');

        if (currentValue) {
          return;
        }

        const $firstVisibleOption = $select.find('option').filter(function () {
          const optionValue = String($(this).val() || '');
          return optionValue && !$(this).prop('hidden') && !$(this).prop('disabled');
        }).first();

        if (!$firstVisibleOption.length) {
          return;
        }

        $select.val(String($firstVisibleOption.val() || ''));
        changed = true;
      });

      if (!changed) {
        return false;
      }

      suppressApplyEvents = true;
      $form.trigger('woocommerce_variation_select_change');
      $form.trigger('check_variations');
      $form.trigger('woocommerce_update_variation_values');

      window.setTimeout(function () {
        suppressApplyEvents = false;
        queueApply();
      }, 30);

      return true;
    }

    function applyCurrentState() {
      const mode = getMode();
      clearCustomSelectFiltering();
      clearCustomSwatchFiltering();
      applySelectFiltering(mode);

      if (autoSelectFirstVisibleInStockValues(mode)) {
        updateToggleLabel();
        return;
      }

      syncSwatches();
      updateToggleLabel();
    }

    function queueApply() {
      if (applyTimer) {
        window.clearTimeout(applyTimer);
      }

      applyTimer = window.setTimeout(function () {
        applyCurrentState();
      }, 20);
    }

    function refreshWooStateThenApply() {
      suppressApplyEvents = true;
      clearCustomSelectFiltering();
      clearCustomSwatchFiltering();
      $form.trigger('check_variations');
      $form.trigger('woocommerce_update_variation_values');

      window.setTimeout(function () {
        suppressApplyEvents = false;
        queueApply();
      }, 30);
    }

    const toggleHtml =
      '<div class="yn-instock-toggle">' +
        '<label class="yn-instock-toggle__switch" for="' + toggleId + '">' +
          '<input type="checkbox" id="' + toggleId + '">' +
          '<span class="yn-instock-toggle__slider"></span>' +
        '</label>' +
        '<span class="yn-instock-toggle__label">' + modeLabel.backorder + '</span>' +
      '</div>';

    const $toggle = $(toggleHtml);

    $toggle.find('input').prop('checked', true);
    $mount.prepend($toggle);

    $toggle.on('change', 'input', function () {
      updateToggleLabel();
      refreshWooStateThenApply();
    });

    $form.on('woocommerce_update_variation_values found_variation reset_data', function () {
      if (suppressApplyEvents) {
        return;
      }

      queueApply();
    });

    updateToggleLabel();
    queueApply();
  });
})();