#187 - Change the button in a pricing table to "current plan" v0.1

<!-- 💙 MEMBERSCRIPT #187 v0.1 💙 - SHOW MEMBER CURRENT PLAN BUTTON -->
<script>
(function() {
  'use strict';
  
  document.addEventListener("DOMContentLoaded", async function() {
    try {
      // Check if Memberstack is loaded
      if (!window.$memberstackDom) {
        console.error('MemberScript #187: 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, do nothing
      if (!member) {
        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, do nothing
      if (!planConnections || planConnections.length === 0) {
        return;
      }
      
      // Get the current plan connection details
      const planConnection = planConnections[0];
      const currentPlanId = planConnection?.planId;
      
      // Get the price ID from the payment object
      const currentPriceId = planConnection?.payment?.priceId;
      
      if (!currentPlanId) {
        return;
      }
      
      // Find all buttons with Memberstack plan attributes
      // Look for data-ms-price:update, data-ms-price:add, data-ms-plan:update, or data-ms-plan:add attributes
      const buttons = document.querySelectorAll(
        '[data-ms-price\\:update], [data-ms-price\\:add], [data-ms-plan\\:update], [data-ms-plan\\:add]'
      );
      
      // Update matching button to say "Current Plan"
      buttons.forEach(button => {
        // Get the plan ID from data-ms-price:update, data-ms-price:add, data-ms-plan:update, or data-ms-plan:add
        const planIdFromPriceUpdate = button.getAttribute('data-ms-price:update');
        const planIdFromPriceAdd = button.getAttribute('data-ms-price:add');
        const planIdFromPlanUpdate = button.getAttribute('data-ms-plan:update');
        const planIdFromPlanAdd = button.getAttribute('data-ms-plan:add');
        const buttonPlanId = planIdFromPriceUpdate || planIdFromPriceAdd || planIdFromPlanUpdate || planIdFromPlanAdd;
        
        // Check if this button's price ID matches the current price ID
        // OR if it matches the plan ID (covering both scenarios)
        if (buttonPlanId === currentPriceId || buttonPlanId === currentPlanId) {
          
          // Update button text
          button.textContent = 'Current Plan';
          
          // Disable the button to prevent clicking
          if (button.disabled !== undefined) {
            button.disabled = true;
          }
          
          // Add a class for styling (optional)
          button.classList.add('current-plan-button');
          
          // Update href to prevent navigation
          if (button.tagName.toLowerCase() === 'a') {
            button.setAttribute('href', 'javascript:void(0)');
            button.style.cursor = 'not-allowed';
            button.style.opacity = '0.6';
            button.setAttribute('onclick', 'return false;');
          }
          
          // Add style attributes for immediate visual feedback
          button.style.pointerEvents = 'none';
        }
      });
      
    } catch (error) {
      console.error('MemberScript #187: Error updating button:', error);
    }
  });
  
  function waitForMemberstack() {
    return new Promise((resolve) => {
      if (window.$memberstackDom && window.$memberstackReady) {
        resolve();
      } else {
        document.addEventListener('memberstack.ready', resolve);
        // Fallback timeout
        setTimeout(resolve, 2000);
      }
    });
  }
})();
</script>