@nuskin/nextgen-header 1.35.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",
@@ -103141,7 +103148,8 @@ function HeaderLoyaltyRegion(_ref) {
   var url = data === null || data === void 0 ? void 0 : data.url;
   return /*#__PURE__*/(0,jsx_runtime_.jsx)(LoyaltyUtilityLink, HeaderLoyaltyRegion_objectSpread(HeaderLoyaltyRegion_objectSpread({
     "data-gtm-loyalty": true,
-    href: url
+    href: url,
+    "aria-label": data === null || data === void 0 ? void 0 : data.loyalty_button_aria_label
   }, data !== null && data !== void 0 && data.open_in_new_tab ? {
     target: "_blank",
     rel: "noopener noreferrer"
@@ -103154,6 +103162,7 @@ function HeaderLoyaltyRegion(_ref) {
 HeaderLoyaltyRegion.propTypes = {
   data: external_prop_types_default().shape({
     label: (external_prop_types_default()).string,
+    loyalty_button_aria_label: (external_prop_types_default()).string,
     url: (external_prop_types_default()).string.isRequired,
     open_in_new_tab: (external_prop_types_default()).bool,
     $: (external_prop_types_default()).object
@@ -103820,7 +103829,8 @@ function Cart(_ref) {
     children: /*#__PURE__*/(0,jsx_runtime_.jsx)(dist.NsCartIcon, {
       itemCount: showCartCount ? itemCount : 0,
       size: "large",
-      color: "slate"
+      color: "slate",
+      ariaLabel: ariaLabel
     })
   }));
 }
@@ -103844,15 +103854,16 @@ Cart.defaultProps = {
 
 
 function HeaderCartRegion(_ref) {
-  var _data$show_cart_icon, _data$show_cart_count, _data$item_count;
+  var _data$show_cart_icon, _data$show_cart_count, _data$item_count, _data$cart_aria_label;
   var data = _ref.data,
     parent$ = _ref.parent$;
   var showCartIcon = (_data$show_cart_icon = data === null || data === void 0 ? void 0 : data.show_cart_icon) !== null && _data$show_cart_icon !== void 0 ? _data$show_cart_icon : true;
   var showCartCount = (_data$show_cart_count = data === null || data === void 0 ? void 0 : data.show_cart_count) !== null && _data$show_cart_count !== void 0 ? _data$show_cart_count : true;
   var itemCount = (_data$item_count = data === null || data === void 0 ? void 0 : data.item_count) !== null && _data$item_count !== void 0 ? _data$item_count : 0;
+  var cartAriaLabel = (_data$cart_aria_label = data === null || data === void 0 ? void 0 : data.cart_aria_label) !== null && _data$cart_aria_label !== void 0 ? _data$cart_aria_label : "";
   return /*#__PURE__*/(0,jsx_runtime_.jsx)(Cart, {
     itemCount: itemCount,
-    "aria-label": "Shopping cart",
+    ariaLabel: cartAriaLabel,
     showCartIcon: showCartIcon,
     showCartCount: showCartCount,
     $: parent$
@@ -103862,7 +103873,8 @@ HeaderCartRegion.propTypes = {
   data: external_prop_types_default().shape({
     show_cart_icon: (external_prop_types_default()).bool,
     show_cart_count: (external_prop_types_default()).bool,
-    item_count: (external_prop_types_default()).number
+    item_count: (external_prop_types_default()).number,
+    cart_aria_label: (external_prop_types_default()).string
   }),
   parent$: (external_prop_types_default()).object
 };
@@ -108113,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,
@@ -108132,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.
@@ -108150,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
   });
@@ -108166,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) {
@@ -108181,7 +108190,7 @@ function GTMTrackerClient(_ref2) {
             component_name: componentName,
             event: impressionEvent,
             event_action: "view",
-            page_name: pageName
+            page_url: pageUrl
           }, impressionElement && {
             element: impressionElement
           }), impressionTriggerType && {
@@ -108201,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;
@@ -108209,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
@@ -108241,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
 };
@@ -108520,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,
@@ -108567,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), {}, {
@@ -110406,11 +110402,13 @@ function renderMarketSelectorModalDesktop(_ref7) {
                   $: logo === null || logo === void 0 ? void 0 : logo.$
                 })
               }), /*#__PURE__*/(0,jsx_runtime_.jsx)(MarketSelector_styled_ModalTitle, MarketSelector_objectSpread(MarketSelector_objectSpread({
-                id: "market-selector-modal-title"
+                id: "market-selector-modal-title",
+                "aria-label": selector === null || selector === void 0 ? void 0 : selector.select_your_market_language_text_aria_label
               }, (_marketSelectorDollar = marketSelectorDollar === null || marketSelectorDollar === void 0 ? void 0 : marketSelectorDollar.select_your_market_language_text) !== null && _marketSelectorDollar !== void 0 ? _marketSelectorDollar : {}), {}, {
                 children: text.modalTitle
               })), /*#__PURE__*/(0,jsx_runtime_.jsx)(CancelWrap, {
                 children: /*#__PURE__*/(0,jsx_runtime_.jsx)(CancelButton, {
+                  ariaLabel: selector === null || selector === void 0 ? void 0 : selector.cancel_text_aria_label,
                   label: text.cancelText,
                   onClick: closeModal,
                   parent$: (_marketSelectorDollar2 = marketSelectorDollar === null || marketSelectorDollar === void 0 ? void 0 : marketSelectorDollar.cancel_text) !== null && _marketSelectorDollar2 !== void 0 ? _marketSelectorDollar2 : {}
@@ -110419,6 +110417,7 @@ function renderMarketSelectorModalDesktop(_ref7) {
             }), /*#__PURE__*/(0,jsx_runtime_.jsx)(TopControls, {
               children: /*#__PURE__*/(0,jsx_runtime_.jsxs)(RememberRow, {
                 htmlFor: "market-selector-remember-selection",
+                "aria-label": selector === null || selector === void 0 ? void 0 : selector.remember_region_text_aria_label,
                 "data-checked": rememberSelection ? "true" : "false",
                 "data-toggle-source": rememberToggleSource,
                 "data-hovered": isRememberHovered ? "true" : "false",
@@ -110541,12 +110540,14 @@ function renderMarketSelectorModalMobile(_ref8) {
       children: [/*#__PURE__*/(0,jsx_runtime_.jsx)(MobileStickyHeaderContainer, {
         children: /*#__PURE__*/(0,jsx_runtime_.jsxs)(MobileCompactHeaderRow, {
           children: [/*#__PURE__*/(0,jsx_runtime_.jsx)(MobileCompactTitle, MarketSelector_objectSpread(MarketSelector_objectSpread({
-            id: "market-selector-modal-title"
+            id: "market-selector-modal-title",
+            "aria-label": selector === null || selector === void 0 ? void 0 : selector.select_your_market_language_text_aria_label
           }, (_marketSelectorDollar4 = marketSelectorDollar === null || marketSelectorDollar === void 0 ? void 0 : marketSelectorDollar.select_your_market_language_text) !== null && _marketSelectorDollar4 !== void 0 ? _marketSelectorDollar4 : {}), {}, {
             children: text.modalTitle
           })), /*#__PURE__*/(0,jsx_runtime_.jsx)(MobileModalHeaderCancelWrap, {
             children: /*#__PURE__*/(0,jsx_runtime_.jsx)(CancelButton, {
               className: "market-selector-mobile-header-cancel",
+              ariaLabel: selector === null || selector === void 0 ? void 0 : selector.cancel_text_aria_label,
               label: text.cancelText,
               onClick: closeModal,
               parent$: (_marketSelectorDollar5 = marketSelectorDollar === null || marketSelectorDollar === void 0 ? void 0 : marketSelectorDollar.cancel_text) !== null && _marketSelectorDollar5 !== void 0 ? _marketSelectorDollar5 : {}
@@ -110560,6 +110561,7 @@ function renderMarketSelectorModalMobile(_ref8) {
           children: /*#__PURE__*/(0,jsx_runtime_.jsx)(MobileRememberControls, {
             children: /*#__PURE__*/(0,jsx_runtime_.jsxs)(MobileRememberRowCompact, {
               htmlFor: "market-selector-remember-selection",
+              "aria-label": selector === null || selector === void 0 ? void 0 : selector.remember_region_text_aria_label,
               "data-checked": rememberSelection ? "true" : "false",
               "data-toggle-source": rememberToggleSource,
               "data-hovered": isRememberHovered ? "true" : "false",
@@ -110963,7 +110965,8 @@ function MarketSelector(_ref11) {
     "aria-expanded": isVisible,
     "aria-controls": "market-selector-modal",
     onClick: openModal,
-    "data-testid": "market-selector-trigger"
+    "data-testid": "market-selector-trigger",
+    "aria-label": selector === null || selector === void 0 ? void 0 : selector.trigger_pill_aria_label
   };
   var desktopTrigger = /*#__PURE__*/(0,jsx_runtime_.jsx)(TriggerPill, MarketSelector_objectSpread(MarketSelector_objectSpread({}, triggerButtonShared), {}, {
     children: triggerInner
@@ -111206,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$
@@ -111225,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],
@@ -111269,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);
@@ -111312,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,
@@ -111370,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)."; }