@cleartrip/ct-design-header 1.2.0-SNAPSHOT-remove-hover-delay-test.0 → 1.2.0-SNAPSHOT-final-header-test.0

package/dist/ct-design-header.cjs.js

@@ -2,12 +2,12 @@
 
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var ctDesignContainer = require('@cleartrip/ct-design-container');
 var ctDesignTypography = require('@cleartrip/ct-design-typography');
 var ctDesignButton = require('@cleartrip/ct-design-button');
 var ctDesignDivider = require('@cleartrip/ct-design-divider');
 var ctDesignIcons = require('@cleartrip/ct-design-icons');
-var react = require('react');
 var ctDesignShimmer = require('@cleartrip/ct-design-shimmer');
 
 var OFFERS_URL = 'all-offers/?categories=flights';
@@ -16,23 +16,27 @@ var SUPPORT_URL = '/support';
 var NAVBAR_OPTIONS = [{
   lefticon: ctDesignIcons.Offers,
   text: 'Offers',
+  ravenActionName: 'offers',
   isHoverable: false,
   isClickable: true,
   link: OFFERS_URL
 }, {
   lefticon: ctDesignIcons.BusinessBag,
   text: 'Business',
+  ravenActionName: 'business',
   rightIcon: ctDesignIcons.ChevronDown,
   isHoverable: true
 }, {
   lefticon: ctDesignIcons.MyTrips,
   text: 'My Trips',
+  ravenActionName: 'mytrips',
   isHoverable: false,
   isClickable: true,
   link: MY_TRIPS_URL
 }, {
   lefticon: ctDesignIcons.SupportIcon,
   text: 'Support',
+  ravenActionName: 'support',
   isHoverable: false,
   isClickable: true,
   link: SUPPORT_URL
@@ -68,24 +72,57 @@ var LOB_DATA = [{
 var bdConfig = [{
   title: 'AgentBox',
   subtitle: 'For travel agents',
-  details: 'One-stop travel solution offering the best deals to our travel agency partners'
+  details: 'One-stop travel solution offering the best deals to our travel agency partners',
+  link: 'https://agency.cleartrip.com'
 }, {
   title: 'OutOfOffice',
   subtitle: 'For startups, corporates and SMEs',
-  details: 'Manage corporate business travel, smartly'
+  details: 'Manage corporate business travel, smartly',
+  link: 'https://ooo.cleartrip.com/',
+  ravenActionName: 'ooo'
 }, {
   title: 'MICE',
   subtitle: 'For corporate events',
-  details: 'An end-to-end management solution for all your corporate events'
+  details: 'An end-to-end management solution for all your corporate events',
+  link: '/mice'
 }, {
   title: 'API',
   subtitle: 'For developers',
-  details: 'Unlock seamless integration and scale with our powerful, reliable APIs'
+  details: 'Unlock seamless integration and scale with our powerful, reliable APIs',
+  link: '/api'
 }];
 var BUSINESS_DROPDOWN_HEADING = 'Other business services';
+exports.RAVEN_PAGE_NAMES = void 0;
+(function (RAVEN_PAGE_NAMES) {
+  RAVEN_PAGE_NAMES["UNIFIED_HOME"] = "unified_homepage";
+  RAVEN_PAGE_NAMES["HOTELS_HOME"] = "hotels_homepage";
+  RAVEN_PAGE_NAMES["FLIGHTS_HOME"] = "flights_homepage";
+})(exports.RAVEN_PAGE_NAMES || (exports.RAVEN_PAGE_NAMES = {}));
+var RAVEN_PLATFORMS;
+(function (RAVEN_PLATFORMS) {
+  RAVEN_PLATFORMS["DESKTOP"] = "desktop";
+})(RAVEN_PLATFORMS || (RAVEN_PLATFORMS = {}));
+
+var HeaderContext = react.createContext(undefined);
+var useHeaderContext = function () {
+  var context = react.useContext(HeaderContext);
+  if (!context) {
+    throw new Error('useHeaderContext must be used within a HeaderProvider');
+  }
+  return context;
+};
+var HeaderProvider = function (_a) {
+  var value = _a.value,
+    children = _a.children;
+  return jsxRuntime.jsx(HeaderContext.Provider, tslib.__assign({
+    value: value
+  }, {
+    children: children
+  }));
+};
 
-var LobsHeader = function (_a) {
-  var selectedLOB = _a.selectedLOB;
+var LobsHeader = function () {
+  var selectedLOB = useHeaderContext().selectedLOB;
   return jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
     className: 'flex p-4 flex-middle flex-center p-sticky',
     css: {
@@ -322,18 +359,83 @@ var useDropdownAnimation = function (isOpen) {
   };
 };
 
+var stringifyPayload = function (payload) {
+  var keys = Object.keys(payload);
+  var numericValues = [];
+  keys.forEach(function (key) {
+    if (numericValues.includes(key)) {
+      payload[key] = Number(payload[key]);
+    } else {
+      payload[key] = '' + payload[key];
+    }
+  });
+  return payload;
+};
+var isServer = function () {
+  return typeof window === 'undefined' || !window;
+};
+var getQueryParam = function (queryParam) {
+  if (isServer()) {
+    return '';
+  }
+  var urlParams = new URLSearchParams(window.location.search);
+  return urlParams.get(queryParam);
+};
+var ravenLoyaltyTypes = function (loyaltyType) {
+  switch (loyaltyType) {
+    case 'FkVip':
+      return 'fk_vip';
+    case 'FkPremium':
+      return 'fk_plus_premium';
+    case 'InsiderIcon':
+      return 'myntra_insidericon';
+    case 'InsiderElite':
+      return 'myntra_insiderelite';
+    default:
+      return '';
+  }
+};
+var ravenSDKTrigger = function (isUserLoggedIn, eventName, ravenPayload, customRavenPayload, ravenPushCallback, pageName) {
+  var _a;
+  var commonPayload = {
+    page_name: pageName,
+    platform: RAVEN_PLATFORMS.DESKTOP,
+    login_status: isUserLoggedIn ? 'yes' : 'no',
+    domain: (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.host
+  };
+  var newRavenPayload = stringifyPayload(ravenPayload);
+  var parsedCustomRavenPayload = stringifyPayload(customRavenPayload);
+  try {
+    ravenPushCallback(eventName, tslib.__assign(tslib.__assign(tslib.__assign({}, commonPayload), newRavenPayload), parsedCustomRavenPayload));
+  } catch (err) {
+    console.log(err);
+    return;
+  }
+};
+
 var BusinessDropdownContent = function (_a) {
   var isOpen = _a.isOpen;
-  var _b = react.useState(0),
-    leftPosition = _b[0],
-    setLeftPosition = _b[1];
+  var _b = useHeaderContext(),
+    isUserLoggedIn = _b.isUserLoggedIn,
+    ravenPushCallback = _b.ravenPushCallback,
+    ravenPageName = _b.ravenPageName,
+    ravenEventName = _b.ravenEventName,
+    loyaltyType = _b.loyaltyType,
+    _c = _b.ravenPayload,
+    ravenPayload = _c === void 0 ? {} : _c;
+  var _d = react.useState(0),
+    leftPosition = _d[0],
+    setLeftPosition = _d[1];
   var containerRef = useDropdownAnimation(isOpen).containerRef;
   react.useEffect(function () {
     var updatePosition = function () {
       if (containerRef.current) {
         var screenWidth = window.innerWidth;
         var containerWidth = containerRef.current.offsetWidth || 0;
-        setLeftPosition((screenWidth - containerWidth) / 2);
+        var newLeft = (screenWidth - containerWidth) / 2;
+        if (newLeft !== leftPosition) {
+          setLeftPosition(newLeft);
+        }
       }
     };
     updatePosition();
@@ -341,7 +443,22 @@ var BusinessDropdownContent = function (_a) {
     return function () {
       return window.removeEventListener('resize', updatePosition);
     };
-  }, []);
+  }, [containerRef, leftPosition]);
+  var handleBusinessDropdownClick = react.useCallback(function (link, title, ravenActionName) {
+    var _a;
+    var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
+    var actionName = ravenActionName ? "".concat(ravenActionName, "_business_click") : title ? "".concat(title.toLowerCase(), "_business_click") : '';
+    var defaultPayload = {
+      action_name: actionName,
+      action_type: 'click',
+      u_utm_source: utmSource,
+      loyalty_type: ravenLoyaltyTypes(loyaltyType)
+    };
+    if (link) {
+      ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
+      window.location.href = link;
+    }
+  }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, loyaltyType]);
   return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
     ref: containerRef,
     className: 'bg-neutral-100 o-hidden',
@@ -378,11 +495,16 @@ var BusinessDropdownContent = function (_a) {
       children: bdConfig.map(function (_a) {
         var title = _a.title,
           subtitle = _a.subtitle,
-          details = _a.details;
+          details = _a.details,
+          link = _a.link,
+          ravenActionName = _a.ravenActionName;
         return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
           css: {
             width: '200px'
           },
+          onClick: function () {
+            return handleBusinessDropdownClick(link, title, ravenActionName);
+          },
           className: 'bd-hover-container c-pointer'
         }, {
           children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
@@ -418,22 +540,16 @@ var BusinessDropdownContent = function (_a) {
   }));
 };
 var AnimatedArrow = function () {
-  return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+  return jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
     className: 'bd-arrow-container'
   }, {
-    children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
-      className: 'bd-arrow-wrapper'
-    }, {
-      children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {})
-    })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
-      className: 'bd-arrow-wrapper'
-    }, {
-      children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {})
-    })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
-      className: 'bd-arrow-wrapper'
-    }, {
-      children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {})
-    }))]
+    children: tslib.__spreadArray([], Array(3), true).map(function (_, index) {
+      return jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+        className: 'bd-arrow-wrapper'
+      }, {
+        children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {})
+      }), index);
+    })
   }));
 };
 
@@ -486,6 +602,7 @@ var ACCOUNT_OPTIONS_POPUP_CONFIG = [{
   redirectionLink: 'accounts/personal-data-dashboard'
 }];
 var SIGN_OUT_TEXT = 'Logout';
+var MY_ACCOUNT_TEXT = 'My Account';
 var LOGGEDIN_USER_TEXT = 'You are logged in with';
 var HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID = 'header-acc-btn';
 var ACCOUNT_OPTIONS_CONTAINER_ID = 'account-options';
@@ -496,13 +613,33 @@ var LoyaltyChip = function (_a) {
     borderGradient = _a.borderGradient,
     backgroundGradient = _a.backgroundGradient,
     handleChipClick = _a.handleChipClick;
-  var _b = react.useState(false),
-    isHovered = _b[0],
-    setIsHovered = _b[1];
-  var handleClick = function () {
-    window.location.href = '/';
-    handleChipClick && handleChipClick();
-  };
+  var _b = useHeaderContext(),
+    loyaltyType = _b.loyaltyType,
+    isUserLoggedIn = _b.isUserLoggedIn,
+    ravenPushCallback = _b.ravenPushCallback,
+    ravenPageName = _b.ravenPageName,
+    _c = _b.ravenPayload,
+    ravenPayload = _c === void 0 ? {} : _c,
+    ravenEventName = _b.ravenEventName;
+  var _d = react.useState(false),
+    isHovered = _d[0],
+    setIsHovered = _d[1];
+  var handleClick = react.useCallback(function () {
+    var _a;
+    if (handleChipClick) {
+      handleChipClick();
+    } else {
+      var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
+      var defaultPayload = {
+        action_name: "loyalty_account_click",
+        action_type: 'click',
+        u_utm_source: utmSource,
+        loyaltyType: ravenLoyaltyTypes(loyaltyType)
+      };
+      ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
+      window.location.href = '/all-offers/loyalty-october';
+    }
+  }, [handleChipClick, loyaltyType, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
   return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
     className: 'flex p-relative flex-middle flex-center br-8 o-hidden c-pointer',
     style: {
@@ -601,17 +738,39 @@ var ExpandableItem = function (_a) {
     handleChipClick = _a.handleChipClick,
     value = _a.value,
     type = _a.type;
-  var _b = react.useState(false),
-    isHovered = _b[0],
-    setIsHovered = _b[1];
-  var handleDefaultClick = function () {
-    if (type === 'supercoins') {
-      window.location.href = '/supercoins';
-    } else if (type === 'wallet') {
-      window.location.href = '/wallet';
+  var _b = useHeaderContext(),
+    loyaltyType = _b.loyaltyType,
+    isUserLoggedIn = _b.isUserLoggedIn,
+    ravenPushCallback = _b.ravenPushCallback,
+    ravenPageName = _b.ravenPageName,
+    ravenEventName = _b.ravenEventName,
+    _c = _b.ravenPayload,
+    ravenPayload = _c === void 0 ? {} : _c;
+  var _d = react.useState(false),
+    isHovered = _d[0],
+    setIsHovered = _d[1];
+  var handleDefaultClick = react.useCallback(function () {
+    var _a;
+    if (handleChipClick) {
+      handleChipClick();
+    } else {
+      var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
+      var defaultPayload = {
+        action_name: "".concat(type, "_account_click"),
+        action_type: 'click',
+        u_utm_source: utmSource,
+        loyaltyType: ravenLoyaltyTypes(loyaltyType)
+      };
+      ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
+      var redirectUrls = {
+        supercoin: '/all-offers/supercoins/',
+        wallet: '/accounts/wallet'
+      };
+      if (redirectUrls[type]) {
+        window.location.href = redirectUrls[type];
+      }
     }
-    handleChipClick && handleChipClick();
-  };
+  }, [handleChipClick, type, loyaltyType, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
   return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
     className: "flex flex-middle justify-center br-8 c-pointer",
     style: {
@@ -651,21 +810,22 @@ var ExpandableItem = function (_a) {
     }))]
   }));
 };
-var RewardsSection = function (props) {
-  var selectedLoyaltyType = props.loyaltyType,
-    _a = props.fkSupercoinBurnBalance,
-    superCoinBalance = _a === void 0 ? 0 : _a,
-    _b = props.walletBalance,
-    walletBalance = _b === void 0 ? 0 : _b,
-    loyaltyLoading = props.loyaltyLoading,
-    superCoinsLoading = props.superCoinsLoading,
-    walletLoading = props.walletLoading,
-    walletChipClick = props.walletChipClick,
-    supercoinsChipClick = props.supercoinsChipClick,
-    loyaltyChipClick = props.loyaltyChipClick,
-    hideWalletChip = props.hideWalletChip,
-    hideSupercoinsChip = props.hideSupercoinsChip,
-    hideLoyaltyChip = props.hideLoyaltyChip;
+var RewardsSection = function () {
+  var _a = useHeaderContext(),
+    selectedLoyaltyType = _a.loyaltyType,
+    _b = _a.fkSupercoinBurnBalance,
+    superCoinBalance = _b === void 0 ? 0 : _b,
+    _c = _a.walletBalance,
+    walletBalance = _c === void 0 ? 0 : _c,
+    loyaltyLoading = _a.loyaltyLoading,
+    superCoinsLoading = _a.superCoinsLoading,
+    walletLoading = _a.walletLoading,
+    walletChipClick = _a.walletChipClick,
+    supercoinsChipClick = _a.supercoinsChipClick,
+    loyaltyChipClick = _a.loyaltyChipClick,
+    hideWalletChip = _a.hideWalletChip,
+    hideSupercoinsChip = _a.hideSupercoinsChip,
+    hideLoyaltyChip = _a.hideLoyaltyChip;
   return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
     className: 'flex p-4 pt-0 flex-start flex-gap-1',
     style: {
@@ -692,7 +852,7 @@ var RewardsSection = function (props) {
       }),
       value: superCoinBalance,
       handleChipClick: supercoinsChipClick,
-      type: 'supercoins'
+      type: 'supercoin'
     }), walletLoading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
       width: '50px',
       height: '32px',
@@ -709,53 +869,58 @@ var RewardsSection = function (props) {
   }));
 };
 
-var AccountDropdownContent = function (props) {
-  var _a = props || {},
-    handleLogout = _a.handleLogout,
-    userName = _a.userName,
-    userMobileNumber = _a.userMobileNumber,
-    countryCode = _a.countryCode,
-    userDetailsLoading = _a.userDetailsLoading,
-    superCoinBalance = _a.fkSupercoinBurnBalance,
-    walletBalance = _a.walletBalance,
-    loyaltyType = _a.loyaltyType,
-    loyaltyLoading = _a.loyaltyLoading,
-    walletLoading = _a.walletLoading,
-    superCoinsLoading = _a.superCoinsLoading,
-    walletChipClick = _a.walletChipClick,
-    supercoinsChipClick = _a.supercoinsChipClick,
-    loyaltyChipClick = _a.loyaltyChipClick,
-    hideLoyaltyChip = _a.hideLoyaltyChip,
-    hideSupercoinsChip = _a.hideSupercoinsChip,
-    hideWalletChip = _a.hideWalletChip,
-    isOpen = _a.isOpen;
+var AccountDropdownContent = function (_a) {
+  var isOpen = _a.isOpen;
+  var _b = useHeaderContext(),
+    handleLogoutClick = _b.handleLogoutClick,
+    userName = _b.userName,
+    userMobileNumber = _b.userMobileNumber,
+    countryCode = _b.countryCode,
+    userDetailsLoading = _b.userDetailsLoading,
+    loyaltyType = _b.loyaltyType,
+    isUserLoggedIn = _b.isUserLoggedIn,
+    ravenEventName = _b.ravenEventName,
+    ravenPageName = _b.ravenPageName,
+    _c = _b.ravenPayload,
+    ravenPayload = _c === void 0 ? {} : _c,
+    ravenPushCallback = _b.ravenPushCallback;
   var containerRef = useDropdownAnimation(isOpen).containerRef;
-  var _b = react.useMemo(function () {
-      var userGreeting = userName && "Hello ".concat(userName, "!");
-      var phoneNumber = countryCode && userMobileNumber ? "".concat(countryCode, " ").concat(userMobileNumber) : '';
+  var _d = react.useMemo(function () {
       return {
-        userGreeting: userGreeting,
-        phoneNumber: phoneNumber
+        userGreeting: userName ? "Hello ".concat(userName, "!") : '',
+        phoneNumber: countryCode && userMobileNumber ? "".concat(countryCode, " ").concat(userMobileNumber) : ''
       };
     }, [userName, userMobileNumber, countryCode]),
-    userGreeting = _b.userGreeting,
-    phoneNumber = _b.phoneNumber;
-  var handleRedirectClick = function (redirectLink) {
-    return function () {
-      window.location.href = redirectLink;
+    userGreeting = _d.userGreeting,
+    phoneNumber = _d.phoneNumber;
+  var generateRavenPayload = function (actionName) {
+    var _a;
+    return {
+      action_name: actionName.toLowerCase().replace(/[\s-]/g, '') + '_account_click',
+      action_type: 'click',
+      u_utm_source: (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic',
+      loyalty_type: ravenLoyaltyTypes(loyaltyType)
     };
   };
-  react.useEffect(function () {
+  var handleAccountOptionsClick = react.useCallback(function (text, redirectLink) {
+    ravenSDKTrigger(isUserLoggedIn, ravenEventName, generateRavenPayload(text), ravenPayload, ravenPushCallback, ravenPageName);
+    window.location.href = redirectLink;
+  }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
+  var handleLogout = react.useCallback(function () {
+    ravenSDKTrigger(isUserLoggedIn, ravenEventName, generateRavenPayload(SIGN_OUT_TEXT), ravenPayload, ravenPushCallback, ravenPageName);
+    handleLogoutClick();
+  }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, handleLogoutClick]);
+  var positionAccountOptionsDiv = react.useCallback(function () {
     var headerAccBtn = document.getElementById(HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID);
     var accountOptionsElem = document.getElementById(ACCOUNT_OPTIONS_CONTAINER_ID);
-    var positionAccountOptionsDiv = function () {
-      var headerBtnRight = headerAccBtn === null || headerAccBtn === void 0 ? void 0 : headerAccBtn.getBoundingClientRect().right;
-      if (accountOptionsElem && headerBtnRight) {
-        accountOptionsElem.style.left = "".concat(headerBtnRight - ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px");
-      }
-    };
-    positionAccountOptionsDiv();
+    if (headerAccBtn && accountOptionsElem) {
+      var headerBtnRight = headerAccBtn.getBoundingClientRect().right;
+      accountOptionsElem.style.left = "".concat(headerBtnRight - ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px");
+    }
   }, []);
+  react.useEffect(function () {
+    positionAccountOptionsDiv();
+  }, [positionAccountOptionsDiv]);
   var renderUserData = function () {
     var renderContent = function (loading, content, variant, color) {
       return jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
@@ -796,20 +961,7 @@ var AccountDropdownContent = function (props) {
       height: '72px'
     }, {
       children: renderUserData()
-    })), jsxRuntime.jsx(RewardsSection, {
-      fkSupercoinBurnBalance: superCoinBalance,
-      walletBalance: walletBalance,
-      loyaltyType: loyaltyType,
-      loyaltyLoading: loyaltyLoading,
-      superCoinsLoading: superCoinsLoading,
-      walletLoading: walletLoading,
-      walletChipClick: walletChipClick,
-      supercoinsChipClick: supercoinsChipClick,
-      loyaltyChipClick: loyaltyChipClick,
-      hideLoyaltyChip: hideLoyaltyChip,
-      hideSupercoinsChip: hideSupercoinsChip,
-      hideWalletChip: hideWalletChip
-    }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+    })), jsxRuntime.jsx(RewardsSection, {}), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
       className: 'p-2 flex flex-column',
       backgroundColor: 'white',
       style: {
@@ -824,7 +976,9 @@ var AccountDropdownContent = function (props) {
           redirectionLink = _a.redirectionLink;
         return jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
           className: 'p-2 br-8 c-pointer hoverable-container',
-          onClick: handleRedirectClick(redirectionLink)
+          onClick: function () {
+            return handleAccountOptionsClick(text, redirectionLink);
+          }
         }, {
           children: jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
             className: 'flex c-pointer',
@@ -863,33 +1017,48 @@ var AccountDropdownContent = function (props) {
   }));
 };
 
-var UserAccount = function (props) {
-  var handleLogout = props.handleLogout,
-    userDetailsLoading = props.userDetailsLoading,
-    userName = props.userName,
-    userMobileNumber = props.userMobileNumber,
-    countryCode = props.countryCode,
-    fkSupercoinBurnBalance = props.fkSupercoinBurnBalance,
-    walletBalance = props.walletBalance,
-    loyaltyType = props.loyaltyType,
-    walletLoading = props.walletLoading,
-    superCoinsLoading = props.superCoinsLoading,
-    loyaltyLoading = props.loyaltyLoading,
-    loyaltyChipClick = props.loyaltyChipClick,
-    supercoinsChipClick = props.supercoinsChipClick,
-    walletChipClick = props.walletChipClick,
-    hideLoyaltyChip = props.hideLoyaltyChip,
-    hideSupercoinsChip = props.hideSupercoinsChip,
-    hideWalletChip = props.hideWalletChip,
-    isNovacThemeEnabled = props.isNovacThemeEnabled;
-  var _a = useHoverDropdown({
+var UserAccount = function () {
+  var _a = useHeaderContext(),
+    isNovacThemeEnabled = _a.isNovacThemeEnabled,
+    ravenEventName = _a.ravenEventName,
+    _b = _a.ravenPayload,
+    ravenPayload = _b === void 0 ? {} : _b,
+    ravenPushCallback = _a.ravenPushCallback,
+    isUserLoggedIn = _a.isUserLoggedIn,
+    loyaltyType = _a.loyaltyType,
+    ravenPageName = _a.ravenPageName;
+  var _c = useHoverDropdown({
       openDelay: 0
     }),
-    isDropdownVisible = _a.isDropdownVisible,
-    handleOnMouseEnter = _a.handleOnMouseEnter,
-    handleOnMouseLeave = _a.handleOnMouseLeave,
-    handleDropdownMouseEnter = _a.handleDropdownMouseEnter,
-    handleDropdownMouseLeave = _a.handleDropdownMouseLeave;
+    isDropdownVisible = _c.isDropdownVisible,
+    handleOnMouseEnter = _c.handleOnMouseEnter,
+    handleOnMouseLeave = _c.handleOnMouseLeave,
+    handleDropdownMouseEnter = _c.handleDropdownMouseEnter,
+    handleDropdownMouseLeave = _c.handleDropdownMouseLeave;
+  var _d = react.useState(false),
+    scrolled = _d[0],
+    setScrolled = _d[1];
+  react.useEffect(function () {
+    var handleScroll = function () {
+      setScrolled(window.scrollY >= 100);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return function () {
+      return window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+  var effectiveNovacThemeEnabled = isNovacThemeEnabled && !scrolled;
+  var triggerRavenEventOnHover = react.useCallback(function () {
+    var _a;
+    var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
+    var defaultPayload = {
+      action_name: "".concat(MY_ACCOUNT_TEXT.toLowerCase().replace(/[\s-]/g, ''), "_header_hover"),
+      action_type: 'hover',
+      u_utm_source: utmSource,
+      loyalty_type: ravenLoyaltyTypes(loyaltyType)
+    };
+    ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
+  }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, loyaltyType]);
   return jsxRuntime.jsxs(ctDesignContainer.Container, {
     children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
       className: "flex px-3 py-2 flex-middle br-12 h-100p c-pointer",
@@ -898,26 +1067,27 @@ var UserAccount = function (props) {
         height: 64
       },
       onMouseEnter: function () {
-        return handleOnMouseEnter(0);
+        handleOnMouseEnter(0);
+        triggerRavenEventOnHover();
       },
       onMouseLeave: handleOnMouseLeave,
       id: HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID
     }, {
       children: [jsxRuntime.jsx(ctDesignIcons.MyAccount, {
-        color: isDropdownVisible ? '#FF4F17' : isNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+        color: isDropdownVisible ? '#FF4F17' : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
       }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
         className: 'flex flex-row flex-middle'
       }, {
         children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
           variant: 'B2',
           className: 'c-pointer',
-          color: isDropdownVisible ? 'secondary' : isNovacThemeEnabled ? 'neutral' : 'primary'
+          color: isDropdownVisible ? 'secondary' : effectiveNovacThemeEnabled ? 'neutral' : 'primary'
         }, {
-          children: "My Account"
+          children: MY_ACCOUNT_TEXT
         })), jsxRuntime.jsx(ctDesignIcons.ChevronDown, {
           width: 20,
           height: 20,
-          fill: isDropdownVisible ? '#FF4F17' : isNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+          fill: isDropdownVisible ? '#FF4F17' : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
         })]
       }))]
     })), jsxRuntime.jsx(HeaderAnimatedMask, tslib.__assign({
@@ -928,23 +1098,6 @@ var UserAccount = function (props) {
       onMaskClick: handleDropdownMouseLeave
     }, {
       children: jsxRuntime.jsx(AccountDropdownContent, {
-        handleLogout: handleLogout,
-        userDetailsLoading: userDetailsLoading,
-        userName: userName,
-        userMobileNumber: userMobileNumber,
-        countryCode: countryCode,
-        loyaltyType: loyaltyType,
-        walletBalance: walletBalance,
-        fkSupercoinBurnBalance: fkSupercoinBurnBalance,
-        walletLoading: walletLoading,
-        superCoinsLoading: superCoinsLoading,
-        loyaltyLoading: loyaltyLoading,
-        loyaltyChipClick: loyaltyChipClick,
-        walletChipClick: walletChipClick,
-        supercoinsChipClick: supercoinsChipClick,
-        hideLoyaltyChip: hideLoyaltyChip,
-        hideSupercoinsChip: hideSupercoinsChip,
-        hideWalletChip: hideWalletChip,
         isOpen: isDropdownVisible
       })
     }))]
@@ -952,49 +1105,86 @@ var UserAccount = function (props) {
 };
 
 var Header = function (props) {
-  var superCoinsLoading = props.superCoinsLoading,
-    fkSupercoinBurnBalance = props.fkSupercoinBurnBalance,
-    onLoginButtonClick = props.onLoginButtonClick,
-    _a = props.showAllLobs,
-    showAllLobs = _a === void 0 ? false : _a,
-    selectedLOB = props.selectedLOB,
-    isUserLoggedIn = props.isUserLoggedIn,
-    handleLogoutClick = props.handleLogoutClick,
-    walletBalance = props.walletBalance,
-    walletLoading = props.walletLoading,
-    loyaltyLoading = props.loyaltyLoading,
-    loyaltyType = props.loyaltyType,
-    userDetailsLoading = props.userDetailsLoading,
-    userName = props.userName,
-    userMobileNumber = props.userMobileNumber,
-    countryCode = props.countryCode,
-    loyaltyChipClick = props.loyaltyChipClick,
-    supercoinsChipClick = props.supercoinsChipClick,
-    walletChipClick = props.walletChipClick,
-    hideLoyaltyChip = props.hideLoyaltyChip,
-    hideSupercoinsChip = props.hideSupercoinsChip,
-    hideWalletChip = props.hideWalletChip;
-    props.ravenPayload;
-    props.ravenPushCallback;
-    var _c = props.isNovacThemeEnabled,
-    isNovacThemeEnabled = _c === void 0 ? false : _c;
-  var _d = useHoverDropdown({
+  return jsxRuntime.jsx(HeaderProvider, tslib.__assign({
+    value: props
+  }, {
+    children: jsxRuntime.jsx(HeaderContent, {})
+  }));
+};
+var HeaderContent = function () {
+  var _a;
+  var _b = useHeaderContext(),
+    onLoginButtonClick = _b.onLoginButtonClick,
+    _c = _b.showAllLobs,
+    showAllLobs = _c === void 0 ? false : _c,
+    isUserLoggedIn = _b.isUserLoggedIn,
+    loyaltyType = _b.loyaltyType,
+    _d = _b.isNovacThemeEnabled,
+    isNovacThemeEnabled = _d === void 0 ? false : _d,
+    _e = _b.ravenPayload,
+    ravenPayload = _e === void 0 ? {} : _e,
+    ravenPushCallback = _b.ravenPushCallback,
+    ravenPageName = _b.ravenPageName,
+    ravenEventName = _b.ravenEventName;
+  var _f = react.useState(false),
+    scrolled = _f[0],
+    setScrolled = _f[1];
+  react.useEffect(function () {
+    var handleScroll = function () {
+      setScrolled(window.scrollY >= 100);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return function () {
+      return window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+  var effectiveNovacThemeEnabled = isNovacThemeEnabled && !scrolled;
+  var headerBackground = effectiveNovacThemeEnabled ? 'transparent' : '#F7FAFF';
+  var _g = useHoverDropdown({
       openDelay: 0
     }),
-    isDropdownVisible = _d.isDropdownVisible,
-    hoveredElemIndex = _d.hoveredElemIndex,
-    handleOnMouseEnter = _d.handleOnMouseEnter,
-    handleOnMouseLeave = _d.handleOnMouseLeave,
-    handleDropdownMouseEnter = _d.handleDropdownMouseEnter,
-    handleDropdownMouseLeave = _d.handleDropdownMouseLeave;
+    isDropdownVisible = _g.isDropdownVisible,
+    hoveredElemIndex = _g.hoveredElemIndex,
+    handleOnMouseEnter = _g.handleOnMouseEnter,
+    handleOnMouseLeave = _g.handleOnMouseLeave,
+    handleDropdownMouseEnter = _g.handleDropdownMouseEnter,
+    handleDropdownMouseLeave = _g.handleDropdownMouseLeave;
+  var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
+  var createPayload = react.useCallback(function (actionName, actionType) {
+    return {
+      action_name: actionName,
+      action_type: actionType,
+      u_utm_source: utmSource,
+      loyalty_type: ravenLoyaltyTypes(loyaltyType)
+    };
+  }, [utmSource, loyaltyType]);
+  var handleNavbarOptionsClick = react.useCallback(function (option) {
+    if (option.isClickable && option.link) {
+      var actionName = "".concat(option.text.toLowerCase().replace(/\s/g, ''), "_header_click");
+      var payload = createPayload(actionName, 'click');
+      ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
+      window.location.href = option.link;
+    }
+  }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
+  var handleHomeClick = react.useCallback(function () {
+    var payload = createPayload('home_header_click', 'click');
+    ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
+    window.location.href = '/';
+  }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
+  var triggerRavenEventOnHover = react.useCallback(function (option) {
+    var actionName = "".concat(option.text.toLowerCase().replace(/\s/g, ''), "_header_hover");
+    var payload = createPayload(actionName, 'hover');
+    ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
+  }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
       className: 'flex t-0 p-sticky w-100p flex-middle flex-center flex-gap-6 flex-no-shrink',
       style: {
         zIndex: 1000,
         height: 64,
-        borderBottom: isNovacThemeEnabled ? '' : '1px solid #E6E6E6',
-        background: isNovacThemeEnabled ? '' : '#F7FAFF'
+        borderBottom: effectiveNovacThemeEnabled ? '' : '1px solid #E6E6E6',
+        background: headerBackground,
+        transition: 'background-color 0.3s ease-in-out, border-bottom 0.3s ease-in-out'
       }
     }, {
       children: jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
@@ -1006,10 +1196,11 @@ var Header = function (props) {
         }
       }, {
         children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
-          className: 'flex flex-row flex-center flex-middle'
+          className: 'flex flex-row flex-center flex-middle c-pointer',
+          onClick: handleHomeClick
         }, {
           children: [jsxRuntime.jsx(ctDesignIcons.CTLogo, {
-            fillColor: isNovacThemeEnabled ? '#FFF' : '#FF4F17'
+            fillColor: effectiveNovacThemeEnabled ? '#FFF' : '#FF4F17'
           }), jsxRuntime.jsx(ctDesignDivider.Divider, {
             style: {
               width: 12,
@@ -1019,7 +1210,7 @@ var Header = function (props) {
               borderBottom: '1px solid #e0e0e0'
             }
           }), jsxRuntime.jsx(ctDesignIcons.Fkcompany, {
-            color: isNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+            color: effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
           })]
         })), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
           className: 'flex flex-row flex-middle flex-center flex-cg-6'
@@ -1032,7 +1223,10 @@ var Header = function (props) {
               return jsxRuntime.jsxs(ctDesignContainer.Container, {
                 children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
                   onMouseEnter: function () {
-                    return handleOnMouseEnter(index);
+                    handleOnMouseEnter(index);
+                    if (option.isHoverable) {
+                      triggerRavenEventOnHover(option);
+                    }
                   },
                   onMouseLeave: handleOnMouseLeave,
                   className: 'flex flex-row flex-middle px-3 py-2 c-pointer p-relative',
@@ -1041,26 +1235,24 @@ var Header = function (props) {
                     height: 64
                   },
                   onClick: function () {
-                    if (option.isClickable) {
-                      window.location.href = option.link;
-                    }
+                    return handleNavbarOptionsClick(option);
                   }
                 }, {
                   children: [jsxRuntime.jsx(option.lefticon, {
-                    color: isHovered ? '#FF4F17' : isNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+                    color: isHovered ? '#FF4F17' : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
                   }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
                     className: 'flex flex-row flex-middle'
                   }, {
                     children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
                       variant: 'B2',
-                      color: isHovered ? 'secondary' : isNovacThemeEnabled ? 'neutral' : 'primary',
+                      color: isHovered ? 'secondary' : effectiveNovacThemeEnabled ? 'neutral' : 'primary',
                       isClickable: true
                     }, {
                       children: option.text
                     })), option.rightIcon && jsxRuntime.jsx(option.rightIcon, {
                       width: 20,
                       height: 20,
-                      fill: isHovered ? '#FF4F17' : isNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+                      fill: isHovered ? '#FF4F17' : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
                     })]
                   }))]
                 }), "nav-option-".concat(index)), jsxRuntime.jsx(HeaderAnimatedMask, tslib.__assign({
@@ -1087,40 +1279,21 @@ var Header = function (props) {
             children: isUserLoggedIn ? jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
               className: 'flex flex-row flex-middle'
             }, {
-              children: jsxRuntime.jsx(UserAccount, {
-                handleLogout: handleLogoutClick,
-                superCoinsLoading: superCoinsLoading,
-                fkSupercoinBurnBalance: fkSupercoinBurnBalance,
-                walletBalance: walletBalance,
-                walletLoading: walletLoading,
-                loyaltyLoading: loyaltyLoading,
-                loyaltyType: loyaltyType,
-                userDetailsLoading: userDetailsLoading,
-                userName: userName,
-                userMobileNumber: userMobileNumber,
-                countryCode: countryCode,
-                walletChipClick: walletChipClick,
-                supercoinsChipClick: supercoinsChipClick,
-                loyaltyChipClick: loyaltyChipClick,
-                hideLoyaltyChip: hideLoyaltyChip,
-                hideSupercoinsChip: hideSupercoinsChip,
-                hideWalletChip: hideWalletChip,
-                isNovacThemeEnabled: isNovacThemeEnabled
-              })
+              children: jsxRuntime.jsx(UserAccount, {})
             })) : jsxRuntime.jsx(ctDesignButton.Button, tslib.__assign({
-              className: "fw-400 fs-14 ".concat(isNovacThemeEnabled ? 'novac-login-button' : 'login-button'),
+              className: "fw-400 fs-14 ".concat(effectiveNovacThemeEnabled ? 'novac-login-button' : 'login-button'),
               onClick: onLoginButtonClick,
               style: {
                 width: 153,
                 height: 40,
-                border: isNovacThemeEnabled ? '1px solid #FFF' : '1px solid #1A1A1A'
+                border: effectiveNovacThemeEnabled ? '1px solid #FFF' : '1px solid #1A1A1A'
               },
               loading: false
             }, {
               children: jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
                 componentNode: 'span',
                 variant: 'L2',
-                color: isNovacThemeEnabled ? 'neutral' : 'primary'
+                color: effectiveNovacThemeEnabled ? 'neutral' : 'primary'
               }, {
                 children: "Login"
               }))
@@ -1128,9 +1301,7 @@ var Header = function (props) {
           })]
         }))]
       }))
-    })), showAllLobs && jsxRuntime.jsx(LobsHeader, {
-      selectedLOB: selectedLOB
-    })]
+    })), showAllLobs && jsxRuntime.jsx(LobsHeader, {})]
   });
 };