@nuskin/nextgen-header 1.36.0 → 1.37.0

package/package-dist/index.js

@@ -101049,6 +101049,13 @@ var GTM_TRACKING_CONFIG = {
     // Loyalty is always an anchor (`data-gtm-loyalty`); selector works for GTM delegation.
     clickSelector: "[data-gtm-loyalty]"
   },
+  topRibbon: {
+    componentName: "Top Ribbon",
+    clickEvent: "top_ribbon_click",
+    clickElement: "CTA Click",
+    clickSelector: "a",
+    extractClickData: true
+  },
   logo: {
     componentName: "Logo",
     clickEvent: "logo_click",
@@ -108118,13 +108125,6 @@ var isServer = typeof window === "undefined";
 
 /** Stable reference — default `customFields = {}` in params creates a new object every render. */
 var EMPTY_CUSTOM_FIELDS = {};
-function pageNameFromPathname(pathname) {
-  var parts = String(pathname || "").split("/").filter(Boolean);
-  if (parts.length <= 2) {
-    return "";
-  }
-  return parts.slice(2).join("/");
-}
 var GTMTracker = function GTMTracker(_ref) {
   var componentName = _ref.componentName,
     impressionEvent = _ref.impressionEvent,
@@ -108137,6 +108137,8 @@ var GTMTracker = function GTMTracker(_ref) {
     clickSelector = _ref$clickSelector === void 0 ? "a" : _ref$clickSelector,
     _ref$clickEventAction = _ref.clickEventAction,
     clickEventAction = _ref$clickEventAction === void 0 ? "click" : _ref$clickEventAction,
+    _ref$extractClickData = _ref.extractClickData,
+    extractClickData = _ref$extractClickData === void 0 ? false : _ref$extractClickData,
     customFields = _ref.customFields,
     children = _ref.children;
   // On the server, just render children — tracking is client-only.
@@ -108155,6 +108157,7 @@ var GTMTracker = function GTMTracker(_ref) {
     clickTriggerType: clickTriggerType,
     clickSelector: clickSelector,
     clickEventAction: clickEventAction,
+    extractClickData: extractClickData,
     customFields: customFields !== null && customFields !== void 0 ? customFields : EMPTY_CUSTOM_FIELDS,
     children: children
   });
@@ -108171,11 +108174,12 @@ function GTMTrackerClient(_ref2) {
     clickTriggerType = _ref2.clickTriggerType,
     clickSelector = _ref2.clickSelector,
     clickEventAction = _ref2.clickEventAction,
+    extractClickData = _ref2.extractClickData,
     customFields = _ref2.customFields,
     children = _ref2.children;
   var componentRef = (0,external_react_.useRef)(null);
   var impressionTrackedRef = (0,external_react_.useRef)(false);
-  var pageName = pageNameFromPathname(typeof window !== "undefined" ? window.location.pathname : "");
+  var pageUrl = typeof window !== "undefined" ? window.location.href : "";
   (0,external_react_.useEffect)(function () {
     if (!impressionEvent) return;
     var observer = new IntersectionObserver(function (entries) {
@@ -108186,7 +108190,7 @@ function GTMTrackerClient(_ref2) {
             component_name: componentName,
             event: impressionEvent,
             event_action: "view",
-            page_name: pageName
+            page_url: pageUrl
           }, impressionElement && {
             element: impressionElement
           }), impressionTriggerType && {
@@ -108206,7 +108210,7 @@ function GTMTrackerClient(_ref2) {
         observer.unobserve(el);
       }
     };
-  }, [componentName, impressionEvent, customFields, pageName, impressionElement, impressionTriggerType]);
+  }, [componentName, impressionEvent, customFields, pageUrl, impressionElement, impressionTriggerType]);
   (0,external_react_.useEffect)(function () {
     if (!clickEvent) return;
     var el = componentRef.current;
@@ -108214,23 +108218,28 @@ function GTMTrackerClient(_ref2) {
     var handleClick = function handleClick(e) {
       var target = e.target.closest(clickSelector);
       if (target) {
-        trackVisualBuilderEvent(GTMTracker_objectSpread(GTMTracker_objectSpread(GTMTracker_objectSpread({
+        var _target$textContent;
+        var dynamicData = extractClickData ? {
+          text: (_target$textContent = target.textContent) === null || _target$textContent === void 0 ? void 0 : _target$textContent.trim(),
+          url: target.href
+        } : {};
+        trackVisualBuilderEvent(GTMTracker_objectSpread(GTMTracker_objectSpread(GTMTracker_objectSpread(GTMTracker_objectSpread({
           component_name: componentName,
           event: clickEvent,
           event_action: clickEventAction,
-          page_name: pageName
+          page_url: pageUrl
         }, clickElement && {
           element: clickElement
         }), clickTriggerType && {
           trigger_type: clickTriggerType
-        }), customFields));
+        }), customFields), dynamicData));
       }
     };
     el.addEventListener("click", handleClick, true);
     return function () {
       return el.removeEventListener("click", handleClick, true);
     };
-  }, [componentName, clickEvent, clickElement, clickTriggerType, clickSelector, clickEventAction, customFields, pageName]);
+  }, [componentName, clickEvent, clickElement, clickTriggerType, clickSelector, clickEventAction, extractClickData, customFields, pageUrl]);
   return /*#__PURE__*/(0,jsx_runtime_.jsx)(GTMTrackerRoot, {
     ref: componentRef,
     children: children
@@ -108246,6 +108255,7 @@ GTMTracker.propTypes = {
   clickTriggerType: (external_prop_types_default()).string,
   clickSelector: (external_prop_types_default()).string,
   clickEventAction: (external_prop_types_default()).string,
+  extractClickData: (external_prop_types_default()).bool,
   customFields: (external_prop_types_default()).object,
   children: (external_prop_types_default()).node.isRequired
 };
@@ -108525,22 +108535,6 @@ var TopRibbon = function TopRibbon(_ref) {
     return null;
   }
   var editing = isEditingMode();
-
-  /**
-   * Fires a GTM dataLayer event when a link is clicked.
-   * Does NOT call preventDefault — native target="_blank" behaviour is preserved.
-   * SSR-safe: guarded behind typeof window check.
-   *
-   * @param {Object} item - The navigation item that was clicked
-   */
-  var handleClick = function handleClick(item) {
-    if (typeof window === "undefined" || !Array.isArray(window.dataLayer)) return;
-    window.dataLayer.push(TopRibbon_objectSpread({
-      event: "top_ribbon_click",
-      link_text: item.label,
-      link_url: item.url
-    }, item.gtmEvent));
-  };
   return /*#__PURE__*/(0,jsx_runtime_.jsx)(StyledTopRibbon, {
     className: className,
     "data-testid": dataTestId,
@@ -108572,9 +108566,6 @@ var TopRibbon = function TopRibbon(_ref) {
               href: linkHref,
               target: "_blank",
               rel: "noopener noreferrer",
-              onClick: function onClick() {
-                return handleClick(item);
-              },
               "aria-label": linkAriaLabel,
               "data-testid": linkTestId,
               children: /*#__PURE__*/(0,jsx_runtime_.jsx)("span", TopRibbon_objectSpread(TopRibbon_objectSpread({}, editing ? (_item$$ = item.$) === null || _item$$ === void 0 ? void 0 : _item$$.label : null), {}, {
@@ -111218,14 +111209,30 @@ function LoyaltyComponent(_ref3) {
 LoyaltyComponent.propTypes = {
   data: (external_prop_types_default()).object
 };
+function TopRibbonComponent(_ref4) {
+  var _data$top_ribbon_aria;
+  var data = _ref4.data,
+    _ref4$parentTags = _ref4.parentTags,
+    parentTags = _ref4$parentTags === void 0 ? {} : _ref4$parentTags;
+  if (!(data !== null && data !== void 0 && data.show_top_ribbon)) return null;
+  return withTracking(/*#__PURE__*/(0,jsx_runtime_.jsx)("div", HeaderView_objectSpread(HeaderView_objectSpread(HeaderView_objectSpread({}, (parentTags === null || parentTags === void 0 ? void 0 : parentTags.top_ribbon) || {}), (parentTags === null || parentTags === void 0 ? void 0 : parentTags.top_ribbon__parent) || {}), {}, {
+    children: /*#__PURE__*/(0,jsx_runtime_.jsx)(top_ribbon_TopRibbon, {
+      links: [data],
+      ariaLabel: (_data$top_ribbon_aria = data.top_ribbon_aria_label) !== null && _data$top_ribbon_aria !== void 0 ? _data$top_ribbon_aria : "Top Ribbon",
+      dataTestId: "header-top-ribbon"
+    })
+  })), {
+    componentType: "topRibbon"
+  });
+}
 function LogoComponent(props) {
   return withTracking(/*#__PURE__*/(0,jsx_runtime_.jsx)(Brand, HeaderView_objectSpread({}, props)), {
     componentType: "logo"
   });
 }
-function CartComponent(_ref4) {
-  var data = _ref4.data,
-    parent$ = _ref4.parent$;
+function CartComponent(_ref5) {
+  var data = _ref5.data,
+    parent$ = _ref5.parent$;
   return withTracking(/*#__PURE__*/(0,jsx_runtime_.jsx)(HeaderCartRegion, {
     data: data,
     parent$: parent$
@@ -111237,14 +111244,14 @@ CartComponent.propTypes = {
   data: (external_prop_types_default()).object,
   parent$: (external_prop_types_default()).object
 };
-function HeaderView(_ref5) {
-  var _headerEntry$logo, _headerEntry$locale_s, _utilityLinksEntry$lo, _utilityLinksEntry$lo2, _headerEntry$cart, _storefrontParams$car, _headerEntry$$, _headerEntry$top_ribb, _headerEntry$market_s, _headerEntry$translat, _headerEntry$translat2, _topRibbon$top_ribbon, _headerEntry$$2, _ref6, _headerEntry$locale, _headerEntry$$3, _headerEntry$$4;
-  var country = _ref5.country,
-    language = _ref5.language,
-    locale = _ref5.locale,
-    headerEntry = _ref5.headerEntry,
-    searchConfig = _ref5.searchConfig,
-    storefrontParams = _ref5.storefrontParams;
+function HeaderView(_ref6) {
+  var _headerEntry$logo, _headerEntry$locale_s, _utilityLinksEntry$lo, _utilityLinksEntry$lo2, _headerEntry$cart, _storefrontParams$car, _headerEntry$$, _headerEntry$top_ribb, _headerEntry$market_s, _headerEntry$translat, _headerEntry$translat2, _headerEntry$$2, _ref7, _headerEntry$locale, _headerEntry$$3, _headerEntry$$4;
+  var country = _ref6.country,
+    language = _ref6.language,
+    locale = _ref6.locale,
+    headerEntry = _ref6.headerEntry,
+    searchConfig = _ref6.searchConfig,
+    storefrontParams = _ref6.storefrontParams;
   var _useState = (0,external_react_.useState)(false),
     _useState2 = HeaderView_slicedToArray(_useState, 2),
     isMobileMenuOpen = _useState2[0],
@@ -111281,13 +111288,10 @@ function HeaderView(_ref5) {
     "data-country": country,
     "data-language": language,
     "data-locale": locale,
-    children: [(topRibbon === null || topRibbon === void 0 ? void 0 : topRibbon.show_top_ribbon) && /*#__PURE__*/(0,jsx_runtime_.jsx)("div", HeaderView_objectSpread(HeaderView_objectSpread(HeaderView_objectSpread({}, ($ === null || $ === void 0 ? void 0 : $.top_ribbon) || {}), ($ === null || $ === void 0 ? void 0 : $.top_ribbon__parent) || {}), {}, {
-      children: /*#__PURE__*/(0,jsx_runtime_.jsx)(top_ribbon_TopRibbon, {
-        links: [topRibbon],
-        ariaLabel: (_topRibbon$top_ribbon = topRibbon.top_ribbon_aria_label) !== null && _topRibbon$top_ribbon !== void 0 ? _topRibbon$top_ribbon : "Top Ribbon",
-        dataTestId: "header-top-ribbon"
-      })
-    })), /*#__PURE__*/(0,jsx_runtime_.jsxs)(TopHeaderRow, {
+    children: [/*#__PURE__*/(0,jsx_runtime_.jsx)(TopRibbonComponent, {
+      data: topRibbon,
+      parentTags: $
+    }), /*#__PURE__*/(0,jsx_runtime_.jsxs)(TopHeaderRow, {
       children: [/*#__PURE__*/(0,jsx_runtime_.jsx)(MobileMenuButton, {
         onClick: function onClick() {
           return setIsMobileMenuOpen(true);
@@ -111324,7 +111328,7 @@ function HeaderView(_ref5) {
           children: [/*#__PURE__*/(0,jsx_runtime_.jsx)(MarketSelector, {
             data: marketSelector,
             logo: logoData,
-            locale: String((_ref6 = (_headerEntry$locale = headerEntry === null || headerEntry === void 0 ? void 0 : headerEntry.locale) !== null && _headerEntry$locale !== void 0 ? _headerEntry$locale : locale) !== null && _ref6 !== void 0 ? _ref6 : "").trim(),
+            locale: String((_ref7 = (_headerEntry$locale = headerEntry === null || headerEntry === void 0 ? void 0 : headerEntry.locale) !== null && _headerEntry$locale !== void 0 ? _headerEntry$locale : locale) !== null && _ref7 !== void 0 ? _ref7 : "").trim(),
             parent$: headerEntry === null || headerEntry === void 0 || (_headerEntry$$3 = headerEntry.$) === null || _headerEntry$$3 === void 0 ? void 0 : _headerEntry$$3.market_selector__0,
             mobileTriggerMode: "drawerPortal",
             drawerOpen: isMobileMenuOpen,
@@ -111382,6 +111386,10 @@ HeaderView.propTypes = {
     customerData: (external_prop_types_default()).object
   })
 };
+TopRibbonComponent.propTypes = {
+  data: (external_prop_types_default()).object,
+  parentTags: (external_prop_types_default()).object
+};
 ;// ./src/styles/Main.styled.js
 
 function Main_styled_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }