#190 - Cross-plan Member Upvote/Downvoting v0.1

<!-- 💙 MEMBERSCRIPT #190 v0.1 💙 - CROSS-PLAN UPVOTE/DOWNVOTE SYSTEM -->

<script>

(function() {

  'use strict';
  // ═══════════════════════════════════════════════════════════════

  // CONFIGURATION

  // ═══════════════════════════════════════════════════════════════

  const CONFIG = {
    PLAN_A_ID: 'pln_voting-privileges--4t4n0w8c',
    PLAN_B_ID: 'pln_voting-privileges-b-uz3z01vd',
    SELECTORS: {
      PROFILE: '[data-ms-code="user-profile"]',
      UPVOTE: '[data-ms-code="upvote-button"]',
      DOWNVOTE: '[data-ms-code="downvote-button"]',
      FORM: 'form'
    },
    TOAST_MS: 3000,
    MESSAGES: {
      upvoteSuccess: 'Your vote has been recorded.',
      downvoteSuccess: 'Your vote has been removed.',
      notLoggedIn: 'You must be logged in with a valid plan to vote.',
      selfVote: 'You cannot vote on yourself.',
      invalidTarget: 'User profile data is missing.',
      wrongPlan: 'You can only vote on members with a different plan.',
      notFoundForm: 'Vote form not found.',
      submitError: 'Failed to submit. Please try again.'
    }
  };

  

  let memberstack = null;

  let currentMember = null;

  let currentPlanIds = [];

  

  // LocalStorage helpers - separate storage for upvotes and downvotes

  function hasUpvoted(voterId, targetMemberId) {
    try {
      const upvotes = JSON.parse(localStorage.getItem('upvotes') || '{}');
      return upvotes[voterId]?.includes(targetMemberId) || false;
    } catch (_) {
      return false;
    }
  }

  function hasDownvoted(voterId, targetMemberId) {
    try {
      const downvotes = JSON.parse(localStorage.getItem('downvotes') || '{}');
      return downvotes[voterId]?.includes(targetMemberId) || false;
    } catch (_) {
      return false;
    }
  }

  function setUpvoted(voterId, targetMemberId) {
    try {
      const upvotes = JSON.parse(localStorage.getItem('upvotes') || '{}');
      if (!upvotes[voterId]) upvotes[voterId] = [];
      if (!upvotes[voterId].includes(targetMemberId)) {
        upvotes[voterId].push(targetMemberId);
        localStorage.setItem('upvotes', JSON.stringify(upvotes));
      }
    } catch (_) {}
  }

  function setDownvoted(voterId, targetMemberId) {
    try {
      const downvotes = JSON.parse(localStorage.getItem('downvotes') || '{}');
      if (!downvotes[voterId]) downvotes[voterId] = [];
      if (!downvotes[voterId].includes(targetMemberId)) {
        downvotes[voterId].push(targetMemberId);
        localStorage.setItem('downvotes', JSON.stringify(downvotes));
      }
    } catch (_) {}
  }

  

  // Button state management

  function setButtonState(btn, disabled) {
    if (!btn) return;
    btn.disabled = disabled;
    btn.style.pointerEvents = disabled ? 'none' : 'auto';
    if (disabled) {
      btn.setAttribute('aria-disabled', 'true');
      btn.classList.add('voted');
      btn.style.opacity = '0.8';
      btn.style.cursor = 'not-allowed';
    } else {
      btn.removeAttribute('aria-disabled');
      btn.classList.remove('voted');
      btn.style.opacity = '1';
      btn.style.cursor = 'pointer';
    }
  }

  

  async function getCurrentMemberData() {
    try {
      if (!memberstack) {
        memberstack = window.$memberstackDom;
        if (!memberstack) return null;
      }

      

      const result = await memberstack.getCurrentMember();

      const member = result?.data;

      if (!member) return null;

      

      const planConnections = member.planConnections || member.data?.planConnections || member.plans || [];

      currentPlanIds = [];

      planConnections.forEach(connection => {
        const planId = connection?.planId;
        if (planId && (planId === CONFIG.PLAN_A_ID || planId === CONFIG.PLAN_B_ID)) {
          currentPlanIds.push(planId);
        }
      });

      

      return member;

    } catch (error) {
      console.error('MemberScript #190: Error getting member data:', error);
      return null;
    }
  }

  

  function canVote(voterPlanIds, targetPlanId) {
    if (!voterPlanIds || !targetPlanId) return false;
    const voterPlans = Array.isArray(voterPlanIds) ? voterPlanIds : [voterPlanIds];
    const targetIsPlanA = targetPlanId === CONFIG.PLAN_A_ID;
    const targetIsPlanB = targetPlanId === CONFIG.PLAN_B_ID;
    const voterHasPlanA = voterPlans.includes(CONFIG.PLAN_A_ID);
    const voterHasPlanB = voterPlans.includes(CONFIG.PLAN_B_ID);
    return (voterHasPlanA && targetIsPlanB) || (voterHasPlanB && targetIsPlanA);
  }

  

  async function handleVote(event, voteType) {
    event.preventDefault();
    event.stopPropagation();
    

    if (!currentMember || currentPlanIds.length === 0) {
      showMessage(CONFIG.MESSAGES.notLoggedIn, 'error');
      return;
    }

    

    const button = event.currentTarget;
    const profileContainer = button.closest(CONFIG.SELECTORS.PROFILE);
    if (!profileContainer) return;

    

    const targetMemberId = profileContainer.getAttribute('data-target-member-id');
    const targetPlanId = profileContainer.getAttribute('data-target-plan-id');
    if (!targetMemberId || !targetPlanId) {
      showMessage(CONFIG.MESSAGES.invalidTarget, 'error');
      return;
    }

    

    if (!canVote(currentPlanIds, targetPlanId)) {
      showMessage(CONFIG.MESSAGES.wrongPlan, 'error');
      return;
    }

    

    const currentMemberId = currentMember.id || currentMember._id;
    if (currentMemberId === targetMemberId) {
      showMessage(CONFIG.MESSAGES.selfVote, 'warning');
      return;
    }

    

    const upvoteBtn = profileContainer.querySelector(CONFIG.SELECTORS.UPVOTE);
    const downvoteBtn = profileContainer.querySelector(CONFIG.SELECTORS.DOWNVOTE);
    

    // Check if already voted with this specific action
    if ((voteType === 'upvote' && hasUpvoted(currentMemberId, targetMemberId)) ||
        (voteType === 'downvote' && hasDownvoted(currentMemberId, targetMemberId))) {
      return;
    }

    

    // Check if button already disabled
    if ((voteType === 'upvote' && upvoteBtn?.classList.contains('voted')) ||
        (voteType === 'downvote' && downvoteBtn?.classList.contains('voted'))) {
      return;
    }

    

    // Prevent double submission
    if (profileContainer.getAttribute('data-submitting') === 'true') return;
    profileContainer.setAttribute('data-submitting', 'true');
    setButtonState(upvoteBtn, true);
    setButtonState(downvoteBtn, true);

    

    try {
      const form = profileContainer.querySelector(CONFIG.SELECTORS.FORM);
      if (!form) {
        showMessage(CONFIG.MESSAGES.notFoundForm, 'error');
        setButtonState(upvoteBtn, false);
        setButtonState(downvoteBtn, false);
        return;
      }

      

      const voterField = form.querySelector('[data-ms-code="voter-member-id"]');
      const targetField = form.querySelector('[data-ms-code="target-member-id"]');
      const actionField = form.querySelector('[data-ms-code="vote-action"]');
      const tsField = form.querySelector('[data-ms-code="vote-timestamp"]');

      

      if (voterField) voterField.value = currentMemberId;
      if (targetField) targetField.value = targetMemberId;
      if (actionField) actionField.value = voteType;
      if (tsField) tsField.value = String(Date.now());

      

      form.submit();

      

      // Update UI: disable the clicked button
      setButtonState(voteType === 'upvote' ? upvoteBtn : downvoteBtn, true);

      

      // Only re-enable the other button if it wasn't previously voted on
      if (voteType === 'upvote' && !hasDownvoted(currentMemberId, targetMemberId)) {
        setButtonState(downvoteBtn, false);
      } else if (voteType === 'downvote' && !hasUpvoted(currentMemberId, targetMemberId)) {
        setButtonState(upvoteBtn, false);
      }

      

      // Save to appropriate localStorage
      if (voteType === 'upvote') {
        setUpvoted(currentMemberId, targetMemberId);
      } else {
        setDownvoted(currentMemberId, targetMemberId);
      }
      showMessage(voteType === 'upvote' ? CONFIG.MESSAGES.upvoteSuccess : CONFIG.MESSAGES.downvoteSuccess, 'success');
      profileContainer.setAttribute('data-submitting', 'false');
    } catch (err) {
      console.error('MemberScript #190: Error submitting vote form:', err);
      showMessage(CONFIG.MESSAGES.submitError, 'error');
      setButtonState(upvoteBtn, false);
      setButtonState(downvoteBtn, false);
      profileContainer.setAttribute('data-submitting', 'false');
    }
  }

  

  function showMessage(message, type = 'info') {
    const colors = { info: '#3b82f6', success: '#10b981', warning: '#f59e0b', error: '#ef4444' };
    const msgEl = document.createElement('div');
    msgEl.setAttribute('data-ms-code', 'vote-message');
    msgEl.textContent = message;
    msgEl.style.cssText = `
      position: fixed; top: 20px; right: 20px; padding: 12px 20px; border-radius: 8px;
      color: white; background: ${colors[type] || colors.info}; z-index: 10000;
      font-size: 14px; font-weight: 500; max-width: 300px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15); animation: slideIn 0.3s ease-out;
    `;
    document.body.appendChild(msgEl);
    setTimeout(() => {
      msgEl.style.animation = 'slideOut 0.3s ease-out';
      setTimeout(() => msgEl.remove(), 300);
    }, CONFIG.TOAST_MS);
  }

  

  function initializeVoting() {
    // Attach event listeners
    document.querySelectorAll(CONFIG.SELECTORS.UPVOTE).forEach(btn => {
      btn.addEventListener('click', (e) => handleVote(e, 'upvote'));
    });
    document.querySelectorAll(CONFIG.SELECTORS.DOWNVOTE).forEach(btn => {
      btn.addEventListener('click', (e) => handleVote(e, 'downvote'));
    });

    

    // Restore button states from localStorage (check both upvotes and downvotes separately)
    if (currentMember) {
      const currentMemberId = currentMember.id || currentMember._id;
      document.querySelectorAll(CONFIG.SELECTORS.PROFILE).forEach(profile => {
        const targetMemberId = profile.getAttribute('data-target-member-id');
        const upvoteBtn = profile.querySelector(CONFIG.SELECTORS.UPVOTE);
        const downvoteBtn = profile.querySelector(CONFIG.SELECTORS.DOWNVOTE);

        

        // Check upvotes and downvotes independently
        if (hasUpvoted(currentMemberId, targetMemberId)) {
          setButtonState(upvoteBtn, true);
        }
        if (hasDownvoted(currentMemberId, targetMemberId)) {
          setButtonState(downvoteBtn, true);
        }
      });
    }

    

    // Enable/disable based on plan compatibility
    if (currentPlanIds.length > 0) {
      document.querySelectorAll(CONFIG.SELECTORS.PROFILE).forEach(profile => {
        const targetPlanId = profile.getAttribute('data-target-plan-id');
        const canVoteOnThis = canVote(currentPlanIds, targetPlanId);
        const upvoteBtn = profile.querySelector(CONFIG.SELECTORS.UPVOTE);
        const downvoteBtn = profile.querySelector(CONFIG.SELECTORS.DOWNVOTE);

        

        if (!canVoteOnThis) {
          setButtonState(upvoteBtn, true);
          setButtonState(downvoteBtn, true);
          if (upvoteBtn) upvoteBtn.style.opacity = '0.5';
          if (downvoteBtn) downvoteBtn.style.opacity = '0.5';
        }
      });
    }
  }

  

  // Wait for Memberstack
  async function waitForMemberstack() {
    if (window.$memberstackDom?.getCurrentMember) return;
    return new Promise((resolve) => {
      if (window.$memberstackDom) {
        document.addEventListener('memberstack.ready', resolve);
        setTimeout(resolve, 2000);
      } else {
        const check = setInterval(() => {
          if (window.$memberstackDom) {
            clearInterval(check);
            resolve();
          }
        }, 100);
        setTimeout(() => { clearInterval(check); resolve(); }, 3000);
      }
    });
  }

  

  // Initialize
  document.addEventListener('DOMContentLoaded', async function() {
    try {
      await waitForMemberstack();
      currentMember = await getCurrentMemberData();

      

      setTimeout(() => {
        initializeVoting();
      }, 100);
    } catch (error) {
      console.error('MemberScript #190: Error initializing:', error);
    }
  });
})();

</script>

<style>
[data-ms-code="upvote-button"].voted,
[data-ms-code="downvote-button"].voted {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}
</style>