@cleartrip/ct-design-header 1.2.0-SNAPSHOT-hide-chips-test.0 → 1.2.0-SNAPSHOT-final-header-test.0

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('@cleartrip/ct-design-container'), require('@cleartrip/ct-design-typography'), require('@cleartrip/ct-design-button'), require('@cleartrip/ct-design-divider'), require('@cleartrip/ct-design-icons'), require('react'), require('@cleartrip/ct-design-shimmer')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', '@cleartrip/ct-design-container', '@cleartrip/ct-design-typography', '@cleartrip/ct-design-button', '@cleartrip/ct-design-divider', '@cleartrip/ct-design-icons', 'react', '@cleartrip/ct-design-shimmer'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemHeader = {}, global.jsxRuntime, global.ctDesignContainer, global.ctDesignTypography, global.ctDesignButton, global.ctDesignDivider, global.ctDesignIcons, global.React, global.ctDesignShimmer));
-})(this, (function (exports, jsxRuntime, ctDesignContainer, ctDesignTypography, ctDesignButton, ctDesignDivider, ctDesignIcons, react, ctDesignShimmer) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-container'), require('@cleartrip/ct-design-typography'), require('@cleartrip/ct-design-button'), require('@cleartrip/ct-design-divider'), require('@cleartrip/ct-design-icons'), require('@cleartrip/ct-design-shimmer')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-container', '@cleartrip/ct-design-typography', '@cleartrip/ct-design-button', '@cleartrip/ct-design-divider', '@cleartrip/ct-design-icons', '@cleartrip/ct-design-shimmer'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemHeader = {}, global.jsxRuntime, global.React, global.ctDesignContainer, global.ctDesignTypography, global.ctDesignButton, global.ctDesignDivider, global.ctDesignIcons, global.ctDesignShimmer));
+})(this, (function (exports, jsxRuntime, react, ctDesignContainer, ctDesignTypography, ctDesignButton, ctDesignDivider, ctDesignIcons, ctDesignShimmer) { 'use strict';
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -30,6 +30,15 @@
       };
       return __assign.apply(this, arguments);
     };
+    function __spreadArray(to, from, pack) {
+      if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+          if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+          ar[i] = from[i];
+        }
+      }
+      return to.concat(ar || Array.prototype.slice.call(from));
+    }
     typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
       var e = new Error(message);
       return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -41,23 +50,27 @@
     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
@@ -93,24 +106,57 @@
     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, __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, __assign({
         className: 'flex p-4 flex-middle flex-center p-sticky',
         css: {
@@ -214,7 +260,6 @@
       var showFlagProxy = useDelayedUnmount(show, 300);
       var triggerTransition = useMountTransition(show, 100);
       var triggerOpenTransition = triggerTransition;
-      console.log(show, showFlagProxy, 'custom hook');
       return jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [showFlagProxy && jsxRuntime.jsx(ctDesignContainer.Container, {
           id: 'mask-container',
@@ -243,7 +288,7 @@
     var useHoverDropdown = function (_a) {
       var _b = _a === void 0 ? {} : _a,
         _c = _b.closeDelay,
-        closeDelayArg = _c === void 0 ? 300 : _c,
+        closeDelayArg = _c === void 0 ? 0 : _c,
         _d = _b.openDelay,
         openDelay = _d === void 0 ? 500 : _d;
       var closeDelay = Math.max(closeDelayArg, MIN_CLOSE_DELAY);
@@ -348,18 +393,83 @@
       };
     };
 
+    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, __assign(__assign(__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();
@@ -367,7 +477,22 @@
         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, __assign({
         ref: containerRef,
         className: 'bg-neutral-100 o-hidden',
@@ -404,11 +529,16 @@
           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, __assign({
               css: {
                 width: '200px'
               },
+              onClick: function () {
+                return handleBusinessDropdownClick(link, title, ravenActionName);
+              },
               className: 'bd-hover-container c-pointer'
             }, {
               children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
@@ -444,22 +574,16 @@
       }));
     };
     var AnimatedArrow = function () {
-      return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
+      return jsxRuntime.jsx(ctDesignContainer.Container, __assign({
         className: 'bd-arrow-container'
       }, {
-        children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({
-          className: 'bd-arrow-wrapper'
-        }, {
-          children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {})
-        })), jsxRuntime.jsx(ctDesignContainer.Container, __assign({
-          className: 'bd-arrow-wrapper'
-        }, {
-          children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {})
-        })), jsxRuntime.jsx(ctDesignContainer.Container, __assign({
-          className: 'bd-arrow-wrapper'
-        }, {
-          children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {})
-        }))]
+        children: __spreadArray([], Array(3), true).map(function (_, index) {
+          return jsxRuntime.jsx(ctDesignContainer.Container, __assign({
+            className: 'bd-arrow-wrapper'
+          }, {
+            children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {})
+          }), index);
+        })
       }));
     };
 
@@ -512,6 +636,7 @@
       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';
@@ -522,13 +647,33 @@
         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, __assign({
         className: 'flex p-relative flex-middle flex-center br-8 o-hidden c-pointer',
         style: {
@@ -627,17 +772,39 @@
         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, __assign({
         className: "flex flex-middle justify-center br-8 c-pointer",
         style: {
@@ -677,21 +844,22 @@
         }))]
       }));
     };
-    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, __assign({
         className: 'flex p-4 pt-0 flex-start flex-gap-1',
         style: {
@@ -718,7 +886,7 @@
           }),
           value: superCoinBalance,
           handleChipClick: supercoinsChipClick,
-          type: 'supercoins'
+          type: 'supercoin'
         }), walletLoading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
           width: '50px',
           height: '32px',
@@ -735,53 +903,58 @@
       }));
     };
 
-    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, __assign({
@@ -822,20 +995,7 @@
           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, __assign({
+        })), jsxRuntime.jsx(RewardsSection, {}), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
           className: 'p-2 flex flex-column',
           backgroundColor: 'white',
           style: {
@@ -850,7 +1010,9 @@
               redirectionLink = _a.redirectionLink;
             return jsxRuntime.jsx(ctDesignContainer.Container, __assign({
               className: 'p-2 br-8 c-pointer hoverable-container',
-              onClick: handleRedirectClick(redirectionLink)
+              onClick: function () {
+                return handleAccountOptionsClick(text, redirectionLink);
+              }
             }, {
               children: jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
                 className: 'flex c-pointer',
@@ -889,32 +1051,48 @@
       }));
     };
 
-    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;
-      var _a = useHoverDropdown({
-          openDelay: 500
+    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, __assign({
           className: "flex px-3 py-2 flex-middle br-12 h-100p c-pointer",
@@ -923,26 +1101,27 @@
             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' : '#1A1A1A'
+            color: isDropdownVisible ? '#FF4F17' : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
           }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
             className: 'flex flex-row flex-middle'
           }, {
             children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
               variant: 'B2',
               className: 'c-pointer',
-              color: isDropdownVisible ? 'secondary' : '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' : '#1A1A1A'
+              fill: isDropdownVisible ? '#FF4F17' : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
             })]
           }))]
         })), jsxRuntime.jsx(HeaderAnimatedMask, __assign({
@@ -953,23 +1132,6 @@
           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
           })
         }))]
@@ -977,47 +1139,86 @@
     };
 
     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 = useHoverDropdown({
-          openDelay: 500
+      return jsxRuntime.jsx(HeaderProvider, __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 = _c.isDropdownVisible,
-        hoveredElemIndex = _c.hoveredElemIndex,
-        handleOnMouseEnter = _c.handleOnMouseEnter,
-        handleOnMouseLeave = _c.handleOnMouseLeave,
-        handleDropdownMouseEnter = _c.handleDropdownMouseEnter,
-        handleDropdownMouseLeave = _c.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, __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: '1px solid #E6E6E6',
-            background: '#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, __assign({
@@ -1029,9 +1230,12 @@
             }
           }, {
             children: [jsxRuntime.jsxs(ctDesignContainer.Container, __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, {}), jsxRuntime.jsx(ctDesignDivider.Divider, {
+              children: [jsxRuntime.jsx(ctDesignIcons.CTLogo, {
+                fillColor: effectiveNovacThemeEnabled ? '#FFF' : '#FF4F17'
+              }), jsxRuntime.jsx(ctDesignDivider.Divider, {
                 style: {
                   width: 12,
                   marginLeft: 2,
@@ -1039,7 +1243,9 @@
                   transform: 'rotate(90deg)',
                   borderBottom: '1px solid #e0e0e0'
                 }
-              }), jsxRuntime.jsx(ctDesignIcons.Fkcompany, {})]
+              }), jsxRuntime.jsx(ctDesignIcons.Fkcompany, {
+                color: effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+              })]
             })), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
               className: 'flex flex-row flex-middle flex-center flex-cg-6'
             }, {
@@ -1051,7 +1257,10 @@
                   return jsxRuntime.jsxs(ctDesignContainer.Container, {
                     children: [jsxRuntime.jsxs(ctDesignContainer.Container, __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',
@@ -1060,26 +1269,24 @@
                         height: 64
                       },
                       onClick: function () {
-                        if (option.isClickable) {
-                          window.location.href = option.link;
-                        }
+                        return handleNavbarOptionsClick(option);
                       }
                     }, {
                       children: [jsxRuntime.jsx(option.lefticon, {
-                        color: isHovered ? '#FF4F17' : '#1A1A1A'
+                        color: isHovered ? '#FF4F17' : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
                       }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
                         className: 'flex flex-row flex-middle'
                       }, {
                         children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
                           variant: 'B2',
-                          color: isHovered ? 'secondary' : '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' : '#1A1A1A'
+                          fill: isHovered ? '#FF4F17' : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
                         })]
                       }))]
                     }), "nav-option-".concat(index)), jsxRuntime.jsx(HeaderAnimatedMask, __assign({
@@ -1106,38 +1313,21 @@
                 children: isUserLoggedIn ? jsxRuntime.jsx(ctDesignContainer.Container, __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
-                  })
+                  children: jsxRuntime.jsx(UserAccount, {})
                 })) : jsxRuntime.jsx(ctDesignButton.Button, __assign({
-                  className: "fw-400 fs-14 login-button",
+                  className: "fw-400 fs-14 ".concat(effectiveNovacThemeEnabled ? 'novac-login-button' : 'login-button'),
                   onClick: onLoginButtonClick,
                   style: {
                     width: 153,
                     height: 40,
-                    border: '1px solid #1A1A1A'
+                    border: effectiveNovacThemeEnabled ? '1px solid #FFF' : '1px solid #1A1A1A'
                   },
                   loading: false
                 }, {
                   children: jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
                     componentNode: 'span',
-                    variant: 'L2'
+                    variant: 'L2',
+                    color: effectiveNovacThemeEnabled ? 'neutral' : 'primary'
                   }, {
                     children: "Login"
                   }))
@@ -1145,9 +1335,7 @@
               })]
             }))]
           }))
-        })), showAllLobs && jsxRuntime.jsx(LobsHeader, {
-          selectedLOB: selectedLOB
-        })]
+        })), showAllLobs && jsxRuntime.jsx(LobsHeader, {})]
       });
     };