Merge branch 'main' into update-bgcta-with-linkblock

network-api/networkapi/mozfest/templates/mozfest/mozfest-base.html

@@ -10,12 +10,13 @@
 {% block ga_identifier %}
     <meta name="google-site-verification" content="xuTYNuCtTC9SLIkAUtmUY9Wce5RDJofc4z4fMprPYUk" />
     <meta name="ga-identifier" content="UA-87658599-15">
-    <meta name="gtm-identifier" content="GTM-5TFTDCX">
+    <!-- The current GTM ID replaced an unkown GTM container with no clear access -->
+    <meta name="gtm-identifier" content="GTM-PQQ8H6PM">
     <script nonce="{{ request.csp_nonce }}">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
         new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                                                   j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
             'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-    })(window,document,'script','dataLayer','GTM-5TFTDCX');</script>
+    })(window,document,'script','dataLayer','GTM-PQQ8H6PM');</script>
 {% endblock %}
 
 

network-api/networkapi/templates/pages/base.html

@@ -40,12 +40,13 @@
         {% block ga_identifier %}
             <meta name="google-site-verification" content="D7k-r3fHm-XfJ9E7T1uZ5aqHJG2mx-0uUZFeBUDN2lY">
             <meta name="ga-identifier" content="UA-87658599-6">
-            <meta name="gtm-identifier" content="GTM-MD3XGZ4">
+        <!-- The current GTM ID replaced an unkown GTM container with no clear access -->
+            <meta name="gtm-identifier" content="GTM-PQQ8H6PM">
             <script nonce="{{ request.csp_nonce }}">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                                                           j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
                     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-            })(window,document,'script','dataLayer','GTM-MD3XGZ4');</script>
+            })(window,document,'script','dataLayer','GTM-PQQ8H6PM');</script>
         {% endblock %}
 
         {% block fundraiseup_script %}

package.json

@@ -81,7 +81,7 @@
     "autoprefixer": "^10.4.20",
     "axe-core": "^4.10.0",
     "bootstrap": "^4.6.0",
-    "chart.js": "4.4.3",
+    "chart.js": "4.4.4",
     "classnames": "2.5.1",
     "countup.js": "^2.8.0",
     "cssnano": "^6.1.2",

requirements.txt

@@ -99,7 +99,7 @@ django-querystring-tag==1.0.3
     # via -r requirements.in
 django-redis==5.4.0
     # via -r requirements.in
-django-storages==1.14.3
+django-storages==1.14.4
     # via -r requirements.in
 django-taggit==3.0.0
     # via wagtail
@@ -113,7 +113,7 @@ draftjs-exporter==2.1.7
     # via wagtail
 et-xmlfile==1.1.0
     # via openpyxl
-factory-boy==3.3.0
+factory-boy==3.3.1
     # via
     #   -r requirements.in
     #   wagtail-factories
@@ -182,7 +182,7 @@ python-dateutil==2.8.2
     #   botocore
     #   faker
     #   heroku3
-python-slugify==8.0.3
+python-slugify==8.0.4
     # via -r requirements.in
 python3-openid==3.2.0
     # via social-auth-core
@@ -221,7 +221,7 @@ six==1.16.0
     #   python-dateutil
 smmap==5.0.0
     # via gitdb
-social-auth-app-django==5.4.1
+social-auth-app-django==5.4.2
     # via -r requirements.in
 social-auth-core==4.4.1
     # via social-auth-app-django
@@ -263,7 +263,7 @@ wagtail==5.2.6
     #   wagtail-localize-git
     #   wagtail-metadata
     #   wagtailmedia
-wagtail-ab-testing==0.9
+wagtail-ab-testing==0.10
     # via -r requirements.in
 wagtail-color-panel==1.5.0
     # via -r requirements.in

source/js/buyers-guide/search/history.js

@@ -6,10 +6,13 @@ const parentTitle = document.querySelector(`.parent-title`);
 const toggle = document.querySelector(`#product-filter-pni-toggle`);
 
 /**
- * ...
+ * Set up history management
+ *
  * @param {*} instance
- * @param {*} searchBar
- * @param {*} searchInput
+ * @param {Element} searchBar - The search bar element
+ * @param {Element} searchInput - The search input element
+ * @param {Element} mobileSearchBar - The mobile search bar element
+ * @param {Element} mobileSearchInput - The mobile search input element
  */
 export function setupHistoryManagement(
   instance,
@@ -35,10 +38,18 @@ export function setupHistoryManagement(
 }
 
 /**
- * ...
+ * Update History state and update page UI accordingly
+ *
  * @param {*} instance
- * @param {*} searchBar
- * @param {*} searchInput
+ * @param {Element} searchBar - The search bar element
+ * @param {Element} searchInput - The search input element
+ * @param {Element} mobileSearchBar - The mobile search bar element
+ * @param {Element} mobileSearchInput - The mobile search input element
+ *
+ * @todo FIXME. We need to revisit and improve the implementation of this function.
+ *       It's unclear why history.replaceState needs to be called twice.
+ *       It's also unclear why there are repeated if-else statements especially for search parameters.
+ *       Further investigation is needed to understand the purpose of this function.
  */
 export function performInitialHistoryReplace(
   instance,
@@ -120,10 +131,13 @@ export function performInitialHistoryReplace(
 }
 
 /**
- * ...
+ *  Set up the window.popstate event listener
+ *
  * @param {*} instance
- * @param {*} searchBar
- * @param {*} searchInput
+ * @param {Element} searchBar - The search bar element
+ * @param {Element} searchInput - The search input element
+ * @param {Element} mobileSearchBar - The mobile search bar element
+ * @param {Element} mobileSearchInput - The mobile search input element
  */
 export function setupPopStateHandler(
   instance,
@@ -183,7 +197,8 @@ export function setupPopStateHandler(
 }
 
 /**
- * ...
+ * Apply data stored in the history state to the page
+ *
  * @param {*} instance
  */
 export function applyHistory(instance) {

source/js/buyers-guide/search/member-functions.js

@@ -5,7 +5,8 @@ const parentTitle = document.querySelector(`.parent-title`);
 const subcategories = document.querySelectorAll(`.subcategories`);
 
 /**
- * ...
+ * Attach event listeners to the nav links and subcategory links
+ *
  * @param {*} instance
  */
 export function setupNavLinks(instance) {
@@ -116,7 +117,8 @@ export function setupNavLinks(instance) {
 }
 
 /**
- * ...
+ * Attach event listeners to "go back to all" link
+ *
  * @param {*} instance
  */
 export function setupGoBackToAll(instance) {
@@ -153,8 +155,11 @@ export function setupGoBackToAll(instance) {
 }
 
 /**
- * ...
+ * Attach event listeners to the Product Review nav links
+ *
  * @param {*} instance
+ *
+ * @todo See if we can make this DRYer by making use of the toggleProductReviewView function?
  */
 export function setupReviewLinks(instance) {
   const navLinks = document.querySelectorAll(`.product-review-link`);
@@ -179,6 +184,9 @@ export function setupReviewLinks(instance) {
   }
 }
 
+/**
+ * Toggle the Product Review view
+ */
 export function toggleProductReviewView() {
   const editorialContent = document.querySelector(".editorial-content");
   const navLinks = document.querySelectorAll(`.product-review-link`);
@@ -190,6 +198,9 @@ export function toggleProductReviewView() {
   }
 }
 
+/**
+ * Toggle the category related articles section
+ */
 export function toggleCategoryRelatedArticles(category) {
   const relatedArticles = document.querySelectorAll("[data-show-for-category]");
 

source/js/buyers-guide/search/pni-sort-dropdown.js

@@ -4,6 +4,9 @@ const DOWN_ARROW_KEY_CODE = 40;
 const UP_ARROW_KEY_CODE = 38;
 const ESCAPE_KEY_CODE = 27;
 
+/**
+ * Dropdown component for sorting products on PNI
+ */
 export class PNISortDropdown {
   constructor(searchFilter) {
     this.searchFilter = searchFilter;
@@ -81,6 +84,11 @@ export class PNISortDropdown {
     }
   }
 
+  /**
+   * Sets the selected list item and updates the dropdown button content.
+   * @param {Event} e - The event (e.g., click, keydown)
+   * @param {boolean} [pushUpdate=true] - Whether to push the update to the history state.
+   */
   setSelectedListItem(e, pushUpdate = true) {
     this.listItems.forEach((item) => {
       const itemDiv = item.querySelector("div");
@@ -99,12 +107,20 @@ export class PNISortDropdown {
     }
   }
 
+  /**
+   * Closes the dropdown list.
+   */
   closeList() {
     this.listContainer.classList.add("tw-hidden");
     this.dropdownButton.setAttribute("aria-expanded", false);
     this.dropdownButtonArrow.classList.remove("tw-rotate-180");
   }
 
+  /**
+   * Opens the dropdown list.
+   *
+   * @param {boolean} [withFocus=false] - Whether to focus on the first list item.
+   */
   openList(withFocus = false) {
     this.listContainer.classList.remove("tw-hidden");
     this.dropdownButton.setAttribute("aria-expanded", true);
@@ -118,6 +134,11 @@ export class PNISortDropdown {
     }
   }
 
+  /**
+   * Toggle the visibility of the dropdown list
+   *
+   * @param {Event} e The event (e.g., click, keydown)
+   */
   toggleListVisibility(e) {
     const isExpanded =
       this.dropdownButton.getAttribute("aria-expanded") === "true";
@@ -140,6 +161,13 @@ export class PNISortDropdown {
     }
   }
 
+  /**
+   * Focus on the next list item based on the given direction.
+   *
+   * @param {number} direction - They key code of the direction to move the focus (e.g., key code for up arrow / down arrow)
+   *
+   * @todo Consider refactoring this method to make it more readable and maintainable.
+   */
   focusNextListItem(direction) {
     const activeElementId = document.activeElement.id;
     const currentActiveElementIndex = this.listItemIds.indexOf(activeElementId);

source/js/buyers-guide/search/pni-toggle.js

@@ -1,6 +1,9 @@
 import { Utils } from "./utils.js";
 import { gsap } from "gsap";
 
+/**
+ * The control that toggles the "Privacy Not Included" filter on the product list.
+ */
 export class PNIToggle {
   constructor(searchFilter) {
     this.searchFilter = searchFilter;
@@ -51,7 +54,13 @@ export class PNIToggle {
     });
   }
 
+  /**
+   * Toggle the "Privacy Not Included" filter on the product list.
+   *
+   * @param {boolean} doFilter - Whether to filter the list for "Privacy Not Included" products.
+   */
   togglePrivacyOnly(doFilter) {
+    console.log(doFilter);
     const { searchFilter, categoryTitle } = this;
 
     gsap.set("figure.product-box.privacy-ding", { opacity: 1, y: 0 });