#186 - Display a Members Current Plan/Price/Billing Interval v0.1

<!-- 💙 MEMBERSCRIPT #186 v0.1 💙 - DISPLAY A MEMBER’S CURRENT PLAN/PRICE/BILLING INTERVAL -->
<script>
(function() {
  'use strict';
  
  document.addEventListener("DOMContentLoaded", async function() {
    try {
      // Wait for Memberstack to be ready
      await waitForMemberstack();
      
      const memberstack = window.$memberstackDom;
      const member = await memberstack.getCurrentMember();
      
      // Check various possible locations for plan connections
      let planConnections = null;
      
      if (member && member.planConnections) {
        planConnections = member.planConnections;
      } else if (member && member.data && member.data.planConnections) {
        planConnections = member.data.planConnections;
      } else if (member && member.plans) {
        planConnections = member.plans;
      }
      
      if (!planConnections || planConnections.length === 0) {
        showNoPlanState();
        return;
      }
      
      // Get the first active plan
      const planConnection = planConnections[0];
      const planId = planConnection.planId;
      
      if (!planId) {
        showNoPlanState();
        return;
      }
      
      // Try to get the plan details
      let plan = null;
      try {
        if (memberstack.getPlan) {
          plan = await memberstack.getPlan({ planId });
        }
      } catch (e) {
        // Plan details will be extracted from planConnection
      }
      
      // Display plan information
      displayPlanInfo(plan, planConnection, member);
      
    } catch (error) {
      console.error("MemberScript #186: Error loading plan information:", error);
      showError();
    }
  });
  
  function waitForMemberstack() {
    return new Promise((resolve) => {
      if (window.$memberstackDom && window.$memberstackReady) {
        resolve();
      } else {
        document.addEventListener('memberstack.ready', resolve);
        // Fallback timeout
        setTimeout(resolve, 2000);
      }
    });
  }
  
  function displayPlanInfo(plan, planConnection, member) {
    // Hide loading and no-plan states, show plan container
    const loadingState = document.querySelector('[data-ms-code="loading-state"]');
    const noPlanState = document.querySelector('[data-ms-code="no-plan-state"]');
    const planContainer = document.querySelector('[data-ms-code="plan-container"]');
    
    if (loadingState) loadingState.style.display = 'none';
    if (noPlanState) noPlanState.style.display = 'none';
    if (planContainer) planContainer.style.display = 'block';
    
    // Update plan name
    let planName = plan?.data?.name || plan?.data?.planName || plan?.data?.label || plan?.name || plan?.planName || plan?.label || planConnection.planId || 'Your Plan';
    updateElement('[data-ms-code="plan-name"]', planName);
    
    // Update plan price
    let priceValue = null;
    if (planConnection.payment && planConnection.payment.amount !== undefined) {
      priceValue = planConnection.payment.amount;
    } else if (plan?.data && plan.data.amount !== undefined) {
      priceValue = plan.data.amount;
    } else if (plan && plan.amount !== undefined) {
      priceValue = plan.amount;
    } else if (plan?.data && plan.data.price !== undefined) {
      priceValue = plan.data.price / 100;
    } else if (plan && plan.price !== undefined) {
      priceValue = plan.price / 100;
    }
    
    if (priceValue !== null) {
      const currency = planConnection.payment?.currency || plan?.data?.currency || plan?.currency || 'usd';
      const symbol = currency === 'usd' ? '$' : currency.toUpperCase();
      const formattedPrice = priceValue.toFixed(2);
      updateElement('[data-ms-code="plan-price"]', `${symbol}${formattedPrice}`);
    } else {
      updateElement('[data-ms-code="plan-price"]', 'N/A');
    }
    
    // Update billing interval
    if (planConnection.type) {
      const type = planConnection.type.charAt(0).toUpperCase() + planConnection.type.slice(1).toLowerCase();
      updateElement('[data-ms-code="plan-interval"]', type);
    } else {
      updateElement('[data-ms-code="plan-interval"]', 'N/A');
    }
    
    // Update status
    const statusEl = document.querySelector('[data-ms-code="plan-status"]');
    if (statusEl) {
      const status = planConnection.status || 'Active';
      statusEl.textContent = status;
      if (status && (status.toLowerCase() === 'canceled' || status.toLowerCase() === 'cancelled')) {
        statusEl.classList.add('cancelled');
      }
    }
    
    // Update next billing date
    let billingDate = planConnection.payment?.nextBillingDate;
    if (billingDate) {
      const date = new Date(billingDate < 10000000000 ? billingDate * 1000 : billingDate);
      updateElement('[data-ms-code="plan-next-billing"]', formatDate(date));
    } else {
      updateElement('[data-ms-code="plan-next-billing"]', 'N/A');
    }
  }
  
  function updateElement(selector, text) {
    const el = document.querySelector(selector);
    if (el) {
      el.textContent = text;
    }
  }
  
  function formatDate(date) {
    return date.toLocaleDateString('en-US', { 
      year: 'numeric', 
      month: 'long', 
      day: 'numeric' 
    });
  }
  
  function showNoPlanState() {
    const loadingState = document.querySelector('[data-ms-code="loading-state"]');
    const noPlanState = document.querySelector('[data-ms-code="no-plan-state"]');
    const planContainer = document.querySelector('[data-ms-code="plan-container"]');
    
    if (loadingState) loadingState.style.display = 'none';
    if (planContainer) planContainer.style.display = 'none';
    if (noPlanState) noPlanState.style.display = 'block';
  }
  
  function showError() {
    const noPlanState = document.querySelector('[data-ms-code="no-plan-state"]');
    if (noPlanState) {
      noPlanState.innerHTML = '<div class="empty-state"><div style="font-size: 3rem;">⚠️</div><h3>Error Loading Plan</h3><p>Unable to load your plan information. Please try again later.</p></div>';
      noPlanState.style.display = 'block';
    }
  }
})();
</script>