Duplicated products appear when user signs back in

[joe-chelladurai]

When a user signs back in the products get duplicated and form a new div element that is identical to the original product. It disappears on page refresh, however.

For the moment, I'm using a css trick to only display the first product:

.products div:not(:first-child) {
  display: none;
}

I think this is the function behind this:

 function startDataListeners() {
  // Get all our products and render them to the page
  const products = document.querySelector('.products');
  const template = document.querySelector('#product');
  db.collection('products')
    .where('active', '==', true)
    .get()
    .then(function (querySnapshot) {
      querySnapshot.forEach(async function (doc) {
        const priceSnap = await doc.ref
          .collection('prices')
          .where('active', '==', true)
          .orderBy('unit_amount')
          .get();
          if (!'content' in document.createElement('template')) {
            console.error('Your browser doesn’t support HTML template elements.');
            return;
          }

          const product = doc.data();
          const container = template.content.cloneNode(true);

          container.querySelector('h2').innerText = product.name.toUpperCase();
          container.querySelector('.description').innerText =
            product.description?.toUpperCase() || '';
          // Prices dropdown
          priceSnap.docs.forEach((doc) => {
            const priceId = doc.id;
            const priceData = doc.data();
            prices[priceId] = priceData;
            const content = document.createTextNode(
              `${new Intl.NumberFormat('en-US', {
                style: 'currency',
                currency: priceData.currency,
              }).format((priceData.unit_amount / 100).toFixed(2))} per ${
                priceData.interval ?? 'once'
              }`
            );
            const option = document.createElement('option');
            option.value = priceId;
            option.appendChild(content);
            container.querySelector('#price').appendChild(option);
          });

          if (product.images.length) {
            const img = container.querySelector('img');
            img.src = product.images[0];
            img.alt = product.name;
          }

          const form = container.querySelector('form');
          form.addEventListener('submit', subscribe);

          products.appendChild(container);

       //   setTimeout(function(){ location.reload(); }, 5000);

        });
      });
    // Get all subscriptions for the customer
    db.collection('customers')
      .doc(currentUser)
      .collection('subscriptions')
      .where('status', 'in', ['trialing', 'active'])
      .onSnapshot(async (snapshot) => {
        if (snapshot.empty) {
          // Show products
          document.querySelector('#subscribe').style.display = 'block';
          return;
        }
        document.querySelector('#subscribe').style.display = 'none';
        document.querySelector('#my-subscription').style.display = 'block';
        // In this implementation we only expect one Subscription to exist
        const subscription = snapshot.docs[0].data();
        const priceData = (await subscription.price.get()).data();
        document.querySelector(
          '#my-subscription p'
        ).textContent = `You are paying ${new Intl.NumberFormat('en-US', {
          style: 'currency',
          currency: priceData.currency,
        }).format((priceData.unit_amount / 100).toFixed(2))} per ${
          priceData.interval
        }, giving you the role: ${await getCustomClaimRole()}. 🥳`;
      });
  }

And I imagine that this is where the problem occurs.

[thorsten-stripe]

@meshach-joe I'm not able to reproduce this. Can you maybe provide a screen recording?

[thorsten-stripe]

Closing due to inactivty.