Gainsight/Custom_Templates/customer_templates/Instacart - Carrot/master.html.liquid

{% include "header" %}
<script>
  const urlParams = new URLSearchParams(window.location.search);
</script>
{% body %}


<script>

  let lang = '{{current_person.properties.preferred_language}}'
    const langFromQuery = window.location.search.split('lang=')[1];
    if (langFromQuery) {
      lang = langFromQuery;
    }
  const style = document.createElement('style');
  if(lang !== 'en') {
    style.textContent = `
      .lang-en {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;

      }
    `;
  }else if(lang !== 'es') {
    style.textContent = `
      .lang-es {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
      }
    `;
  }

  document.head.appendChild(style);

  function updateFilter(filterId) {
    const filterContainer = document.querySelector('#filter-dropdown-' + filterId);
    const label = document.querySelector('#filter-dropdown-' + filterId + ' .filter-value-label');
    
    if (filterContainer && label) {
      // Get category filter values
      const categorySelect = filterContainer.querySelector('select[name="category-filter"]');
      const categoryValues = categorySelect ? Array.from(categorySelect.selectedOptions).map(option => option.value) : [];
      
      // Get progress filter values
      const progressSelect = filterContainer.querySelector('select[name="progress-filter"]');
      const progressValues = progressSelect ? Array.from(progressSelect.selectedOptions).map(option => option.value) : [];
      
      // Calculate total selected count
      const totalSelected = categoryValues.length + progressValues.length;
      
      if (totalSelected === 0) {
        // Set language-specific "All" text
        const allTextEn = label.querySelector('.lang-en');
        const allTextEs = label.querySelector('.lang-es');
        if (allTextEn && allTextEs) {
          allTextEn.innerText = 'All';
          allTextEs.innerText = 'Todos';
        } else {
          label.innerText = lang === 'es' ? 'Todos' : 'All';
        }
      } else {
        // Set language-specific "selected" text
        const selectedText = lang === 'es' ? `${totalSelected} seleccionados` : `${totalSelected} selected`;
        label.textContent = selectedText;
      }
      
      // Fire custom event with both filter types
      const filterUpdateEvent = new CustomEvent('filterUpdate', {
        detail: {
          filterId: filterId,
          categoryValues: categoryValues,
          progressValues: progressValues
        }
      });
      
      document.dispatchEvent(filterUpdateEvent);
    }
  }

  function resetFilter(filterId) {
    const filterContainer = document.querySelector('#filter-dropdown-' + filterId);
    
    if (filterContainer) {
      // Reset category filter
      const categorySelect = filterContainer.querySelector('select[name="category-filter"]');
      if (categorySelect) {
        Array.from(categorySelect.options).forEach(option => {
          option.selected = false;
        });
      }

      const categoryDisplay = categorySelect.parentElement.querySelector('.choices__list.choices__list--multiple').children;
      Array.from(categoryDisplay).forEach(child => {
        child.remove();
      });
      
      // Reset progress filter
      const progressSelect = filterContainer.querySelector('select[name="progress-filter"]');
      if (progressSelect) {
        Array.from(progressSelect.options).forEach(option => {
          option.selected = false;
        });
      }

      const progressDisplay = progressSelect.parentElement.querySelector('.choices__list.choices__list--multiple').children;
      Array.from(progressDisplay).forEach(child => {
        child.remove();
      });
      
      // Update the filter to apply the reset
      updateFilter(filterId);
    }
  }

  // Achievement tooltip functionality
  let touchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';

  // Show/hide tooltip on click/touch
  $(document).on(touchEvent, '.achievements-carousel-container .carrot-achievment-modal', function(e) {
    e.preventDefault();

    // Remove any existing tooltips
    $('.achievement-tooltip').remove();

    const badge = $(this);

    const descEn = badge.attr('desc-en');
    const descEs = badge.attr('desc-es');

    // Determine which language to use
    const currentLang = lang || 'en';
    const descText = currentLang === 'es' ? descEs : descEn;

    // Create tooltip HTML
    const tooltipHtml = `<div class="achievement-tooltip">${descText}</div>`;

    // Append tooltip to the badge's parent container (positioned element)
    badge.parent().append(tooltipHtml);

    // Check if tooltip would overflow right edge of viewport when aligned left (default CSS)
    const tooltip = $('.achievement-tooltip');
    const tooltipWidth = tooltip.outerWidth();
    const parentRect = badge.parent()[0].getBoundingClientRect();
    tooltip[0].style.setProperty('--triangle-position-left', (parentRect.width / 2) + 'px');
    tooltip[0].style.setProperty('--triangle-position-right', 'auto');

    if (parentRect.left + tooltipWidth > window.innerWidth) {
      // Switch to right alignment to prevent overflow
      tooltip.css('left', 'auto').css('right', '0').addClass('right-aligned');
      tooltip[0].style.setProperty('--triangle-position-left', 'auto');
      tooltip[0].style.setProperty('--triangle-position-right', (parentRect.width / 2) + 'px');
    }
  });

  // Hide tooltip when clicking anywhere else
  $(document).on(touchEvent, function(e) {
    if (!$(e.target).closest('.achievements-carousel-container .carrot-achievment-modal').length &&
        !$(e.target).closest('.achievement-tooltip').length) {
      $('.achievement-tooltip').remove();
    }
  });

</script>