#188 - Show/hide content based on a plan instead of gated content v0.1

<!-- 💙 MEMBERSCRIPT #188 v0.1 - SHOW/HIDE CONTENT BASED ON PLAN 💙 -->
<script>
(function() {
  'use strict';
  
  document.addEventListener("DOMContentLoaded", async function() {
    try {
      // Check if Memberstack is loaded
      if (!window.$memberstackDom) {
        console.error('MemberScript #188: Memberstack DOM package is not loaded.');
        return;
      }
      
      const memberstack = window.$memberstackDom;
      
      // Wait for Memberstack to be ready
      await waitForMemberstack();
      
      // Get current member
      const { data: member } = await memberstack.getCurrentMember();
      
      // If no member is logged in, remove all plan-specific content
      if (!member) {
        removeAllPlanContent();
        return;
      }
      
      // Get the current plan connection
      let planConnections = null;
      
      if (member.planConnections) {
        planConnections = member.planConnections;
      } else if (member.data && member.data.planConnections) {
        planConnections = member.data.planConnections;
      } else if (member.plans) {
        planConnections = member.plans;
      }
      
      // If no plan connections, remove all plan-specific content
      if (!planConnections || planConnections.length === 0) {
        removeAllPlanContent();
        return;
      }
      
      // Get the current plan ID from the most recent active plan
      const currentPlanConnection = planConnections[0];
      const currentPlanId = currentPlanConnection?.planId;
      const currentPriceId = currentPlanConnection?.payment?.priceId;
      
      // Collect all possible IDs to match against
      const matchingIds = [];
      if (currentPlanId) matchingIds.push(currentPlanId);
      if (currentPriceId) matchingIds.push(currentPriceId);
      
      if (matchingIds.length === 0) {
        removeAllPlanContent();
        return;
      }
      
      // Show/remove content based on plan/price IDs
      showPlanSpecificContent(matchingIds);
      
    } catch (error) {
      console.error('MemberScript #188: Error showing/hiding plan content:', error);
      // On error, remove all plan-specific content for security
      removeAllPlanContent();
    }
  });
  
  function waitForMemberstack() {
    return new Promise((resolve) => {
      if (window.$memberstackDom && window.$memberstackReady) {
        resolve();
      } else {
        document.addEventListener('memberstack.ready', resolve);
        // Fallback timeout
        setTimeout(resolve, 2000);
      }
    });
  }
  
  function showPlanSpecificContent(matchingIds) {
    // Find all elements with data-ms-code attributes (plan-specific content)
    const allPlanElements = document.querySelectorAll('[data-ms-code]');
    
    allPlanElements.forEach(element => {
      const elementPlanId = element.getAttribute('data-ms-code');
      
      // Check if element's plan ID matches any of the member's IDs (planId or priceId)
      const shouldShow = matchingIds.includes(elementPlanId);
      
      if (shouldShow) {
        element.classList.remove('ms-plan-hidden');
        element.classList.add('ms-plan-visible');
      } else {
        element.remove();
      }
    });
    
    if (allPlanElements.length === 0) {
      console.warn('MemberScript #188: No elements with data-ms-code attributes found. Add data-ms-code="PLAN_ID" to elements you want to show/hide based on plan.');
    }
  }
  
  function removeAllPlanContent() {
    // Completely remove all elements with data-ms-code attributes if no member is logged in
    const allPlanElements = document.querySelectorAll('[data-ms-code]');
    allPlanElements.forEach(element => {
      element.remove();
    });
  }
})();
</script>