function startDataListeners()

in stripe/public/javascript/app.js [92:177]

• 73 lines of code
• 13 McCabe index (conditional complexity)

function startDataListeners() {
  /**
   * Get all payment methods for the logged in customer
   */
  firebase
    .firestore()
    .collection('stripe_customers')
    .doc(currentUser.uid)
    .collection('payment_methods')
    .onSnapshot((snapshot) => {
      if (snapshot.empty) {
        document.querySelector('#add-new-card').open = true;
      }
      snapshot.forEach(function (doc) {
        const paymentMethod = doc.data();
        if (!paymentMethod.card) {
          return;
        }

        const optionId = `card-${doc.id}`;
        let optionElement = document.getElementById(optionId);

        // Add a new option if one doesn't exist yet.
        if (!optionElement) {
          optionElement = document.createElement('option');
          optionElement.id = optionId;
          document
            .querySelector('select[name=payment-method]')
            .appendChild(optionElement);
        }

        optionElement.value = paymentMethod.id;
        optionElement.text = `${paymentMethod.card.brand} •••• ${paymentMethod.card.last4} | Expires ${paymentMethod.card.exp_month}/${paymentMethod.card.exp_year}`;
      });
    });

  /**
   * Get all payments for the logged in customer
   */
  firebase
    .firestore()
    .collection('stripe_customers')
    .doc(currentUser.uid)
    .collection('payments')
    .onSnapshot((snapshot) => {
      snapshot.forEach((doc) => {
        const payment = doc.data();

        let liElement = document.getElementById(`payment-${doc.id}`);
        if (!liElement) {
          liElement = document.createElement('li');
          liElement.id = `payment-${doc.id}`;
        }

        let content = '';
        if (
          payment.status === 'new' ||
          payment.status === 'requires_confirmation'
        ) {
          content = `Creating Payment for ${formatAmount(
            payment.amount,
            payment.currency
          )}`;
        } else if (payment.status === 'succeeded') {
          const card = payment.charges.data[0].payment_method_details.card;
          content = `✅ Payment for ${formatAmount(
            payment.amount,
            payment.currency
          )} on ${card.brand} card •••• ${card.last4}.`;
        } else if (payment.status === 'requires_action') {
          content = `🚨 Payment for ${formatAmount(
            payment.amount,
            payment.currency
          )} ${payment.status}`;
          handleCardAction(payment, doc.id);
        } else {
          content = `⚠️ Payment for ${formatAmount(
            payment.amount,
            payment.currency
          )} ${payment.status}`;
        }
        liElement.innerText = content;
        document.querySelector('#payments-list').appendChild(liElement);
      });
    });
}