Merge branch 'develop' into filip/v18/badges-alt-attribute

Author: aristath

assets/js/web-components/prpl-badge-progress-bar.js

@@ -112,10 +112,6 @@ const prplUpdatePreviousMonthBadgeProgressBar = ( pointsDiff ) => {
 		`.prpl-previous-month-badge-progress-bar-wrapper[data-badge-id="${ badgeId }"] .prpl-previous-month-badge-progress-bar-remaining`
 	);
 
-	const remainingPointsEls = document.querySelectorAll(
-		`.prpl-previous-month-badge-progress-bar-wrapper .prpl-previous-month-badge-progress-bar-remaining`
-	);
-
 	if ( remainingPointsEl ) {
 		remainingPointsEl.textContent = remainingPointsEl.textContent.replace(
 			remainingPointsEl.getAttribute( 'data-remaining' ),
@@ -125,21 +121,6 @@ const prplUpdatePreviousMonthBadgeProgressBar = ( pointsDiff ) => {
 			'data-remaining',
 			badgeMaxPoints - badgeNewPoints
 		);
-
-		remainingPointsEls.forEach( ( pointsEl ) => {
-			const totalPoints = pointsEl.getAttribute(
-				'data-remaining-total-points'
-			);
-			pointsEl.setAttribute(
-				'data-remaining-total-points',
-				totalPoints - pointsDiff
-			);
-
-			const numberEl = pointsEl.querySelector( '.number' );
-			if ( numberEl ) {
-				numberEl.textContent = totalPoints - pointsDiff;
-			}
-		} );
 	}
 
 	// Update the previous month badge points number.
@@ -181,3 +162,36 @@ const prplUpdatePreviousMonthBadgeProgressBar = ( pointsDiff ) => {
 		}
 	}
 };
+
+/**
+ * Update the previous month badge counters.
+ *
+ * @param {number} pointsDiff The points difference.
+ *
+ * @return {void}
+ */
+// eslint-disable-next-line no-unused-vars
+const prplUpdatePreviousMonthBadgeCounters = ( pointsDiff ) => {
+	const remainingPointsEls = document.querySelectorAll(
+		`.prpl-previous-month-badge-progress-bar-wrapper .prpl-previous-month-badge-progress-bar-remaining`
+	);
+
+	if ( ! remainingPointsEls.length ) {
+		return;
+	}
+
+	remainingPointsEls.forEach( ( pointsEl ) => {
+		const totalPoints = pointsEl.getAttribute(
+			'data-remaining-total-points'
+		);
+		pointsEl.setAttribute(
+			'data-remaining-total-points',
+			totalPoints - pointsDiff
+		);
+
+		const numberEl = pointsEl.querySelector( '.number' );
+		if ( numberEl ) {
+			numberEl.textContent = totalPoints - pointsDiff;
+		}
+	} );
+};

assets/js/web-components/prpl-gauge.js

@@ -1,4 +1,4 @@
-/* global customElements, HTMLElement, prplUpdatePreviousMonthBadgeProgressBar */
+/* global customElements, HTMLElement, prplUpdatePreviousMonthBadgeProgressBar, prplUpdatePreviousMonthBadgeCounters */
 /*
  * Web Component: prpl-gauge
  *
@@ -152,6 +152,9 @@ const prplUpdateRaviGauge = ( pointsDiff ) => {
 		oldCounter.textContent = newValue + 'pt';
 	}
 
+	// Update the previous month badge counters.
+	prplUpdatePreviousMonthBadgeCounters( pointsDiff );
+
 	// Mark badge as completed, in the a Monthly badges widgets, if we reached the max points.
 	if ( newValue >= parseInt( gaugeProps.max ) ) {
 		// We have multiple badges, one in widget and the other in the popover.