live-update points

Author: aristath

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

@@ -112,6 +112,10 @@ 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' ),
@@ -121,6 +125,21 @@ 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.

views/page-widgets/monthly-badges.php

@@ -107,12 +107,13 @@ class="prpl-previous-month-badge-progress-bar-wrapper"
 					<span
 						class="prpl-previous-month-badge-progress-bar-remaining"
 						data-remaining="<?php echo (int) $prpl_previous_incomplete_month_badge->progress_callback()['remaining']; ?>"
+						data-remaining-total-points="<?php echo (int) $prpl_remaining_points; ?>"
 					>
 						<?php
 						\printf(
-							/* translators: %1$d: The number of points. %2$d: The number of days. */
-							\esc_html( \_n( '%1$d more points to go - %2$d day left', '%1$d more points to go - %2$d days left', (int) $prpl_days_remaining, 'progress-planner' ) ),
-							(int) $prpl_remaining_points,
+							/* translators: %1$s: The number of points. %2$d: The number of days. */
+							\esc_html( \_n( '%1$s more points to go - %2$d day left', '%1$s more points to go - %2$d days left', (int) $prpl_days_remaining, 'progress-planner' ) ),
+							'<span class="number">' . (int) $prpl_remaining_points . '</span>',
 							(int) $prpl_days_remaining
 						);
 						?>