@cleartrip/ct-design-header 1.2.0-SNAPSHOT-header-v0.9.0.0 → 1.2.0-SNAPSHOT-header-v0.11.0

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

@@ -50,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
@@ -80,33 +84,36 @@
     };
     var LOB_DATA = [{
       title: LOBS.FLIGHTS,
-      image: 'https://rukmini-ct.flixcart.com/f_auto,w_48,h_48,dpr_2/offermgmt-prod/offermgmt/images/banner/flight_uhp.png?cache=true',
+      image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Flights.png?cache=true',
       link: '/flights'
     }, {
       title: LOBS.HOTELS,
-      image: 'https://rukmini-ct.flixcart.com/f_auto,w_48,h_48,dpr_2/offermgmt-prod/offermgmt/images/banner/hotel_uhp.png?cache=true',
+      image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Hotels.png?cache=true',
       link: '/hotels'
     }, {
       title: LOBS.BUSES,
-      image: 'https://rukmini-ct.flixcart.com/f_auto,w_40,h_40,dpr_2/offermgmt-prod/offermgmt/images/banner/bus_uhp.png?cache=true',
+      image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Buses.png?cache=true',
       link: '/bus'
     }, {
       title: LOBS.TRAIN,
-      image: 'https://rukmini-ct.flixcart.com/f_auto,w_40,h_40,dpr_2/offermgmt-prod/offermgmt/images/banner/train_uhp.png?cache=true',
+      image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Trains.png?cache=true',
       link: '/pages/trains/appOnly'
     }, {
       title: LOBS.PACKAGES,
-      image: 'https://rukmini-ct.flixcart.com/f_auto,w_40,h_40,dpr_2/offermgmt-prod/offermgmt/images/banner/holiday_uhp.png?cache=true',
+      image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Packages.png?cache=true',
       link: '/holidays'
     }];
     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',
@@ -119,16 +126,35 @@
       link: 'https://business.cleartrip.com/api-customers/more-details'
     }];
     var BUSINESS_DROPDOWN_HEADING = 'Other business services';
-    var RAVEN_PAGE_NAMES;
+    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";
-    })(RAVEN_PAGE_NAMES || (RAVEN_PAGE_NAMES = {}));
+      RAVEN_PAGE_NAMES["HOTELS_HOME"] = "hotel_home";
+      RAVEN_PAGE_NAMES["FLIGHTS_HOME"] = "flights_home";
+    })(exports.RAVEN_PAGE_NAMES || (exports.RAVEN_PAGE_NAMES = {}));
     var RAVEN_PLATFORMS;
     (function (RAVEN_PLATFORMS) {
       RAVEN_PLATFORMS["DESKTOP"] = "desktop";
     })(RAVEN_PLATFORMS || (RAVEN_PLATFORMS = {}));
+    var LOG_IN_TEXT = 'Log in';
+    var THEME_CONFIG = {
+      NOVAC: {
+        headerBackground: 'transparent',
+        hoverColor: '#FFB8A5',
+        logoFill: '#FFF',
+        fkcompanyColor: '#FFF',
+        typographyColor: '#FFF',
+        loginButtonColorVariant: ctDesignButton.ButtonColor.NEUTRAL
+      },
+      DEFAULT: {
+        headerBackground: '#F7FAFF',
+        hoverColor: '#FF4F17',
+        logoFill: '#FF4F17',
+        fkcompanyColor: '#1A1A1A',
+        typographyColor: '#1A1A1A',
+        loginButtonColorVariant: ctDesignButton.ButtonColor.PRIMARY
+      }
+    };
 
     var HeaderContext = react.createContext(undefined);
     var useHeaderContext = function () {
@@ -164,33 +190,33 @@
         }
       }, {
         children: LOB_DATA.map(function (item, index) {
+          var title = item.title,
+            link = item.link,
+            image = item.image;
           return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
             display: 'flex',
             alignItems: 'center',
             cursor: 'pointer',
             css: {
               gap: 8,
-              background: selectedLOB === item.title ? '#FFFFFF' : 'transparent',
-              borderRadius: selectedLOB === item.title ? '40px' : '0',
-              padding: selectedLOB === item.title ? '8px 16px 8px 8px' : '0'
+              background: selectedLOB === title ? '#FFFFFF' : 'transparent',
+              borderRadius: selectedLOB === title ? '40px' : '0',
+              padding: selectedLOB === title ? '8px 16px 8px 8px' : '0'
             },
             onClick: function () {
-              window.location.href = item.link;
+              window.location.href = link;
             }
           }, {
             children: [jsxRuntime.jsx("img", {
-              src: item.image,
-              alt: item.title,
+              src: image,
+              alt: title,
               width: 32,
               height: 32
             }), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
-              variant: 'P1',
-              style: {
-                fontWeight: selectedLOB === item.title ? 600 : 500
-              },
+              variant: selectedLOB === title ? ctDesignTypography.TypographyVariant.HM3 : ctDesignTypography.TypographyVariant.B1,
               isClickable: true
             }, {
-              children: item.title
+              children: title
             }))]
           }), index);
         })
@@ -391,11 +417,85 @@
       };
     };
 
+    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;
+      if (typeof ravenPushCallback !== 'function') {
+        console.error('ravenPushCallback is not provided or is not a function');
+        return;
+      }
+      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);
+      var finalPayload = __assign(__assign(__assign({}, commonPayload), newRavenPayload), parsedCustomRavenPayload);
+      try {
+        if (ravenPushCallback.length === 1) {
+          ravenPushCallback({
+            eventName: eventName,
+            eventData: finalPayload
+          });
+        } else {
+          ravenPushCallback(eventName, finalPayload);
+        }
+      } catch (err) {
+        console.error(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 () {
@@ -414,6 +514,21 @@
           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,
         backgroundColor: '#fff',
@@ -434,10 +549,7 @@
           backgroundColor: '#FFF1EC'
         }, {
           children: jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
-            variant: 'HM2',
-            css: {
-              lineHeight: '24px'
-            }
+            variant: 'HM2'
           }, {
             children: BUSINESS_DROPDOWN_HEADING
           }))
@@ -451,11 +563,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({
               cursor: 'pointer',
               width: '200px',
-              className: 'bd-hover-container'
+              className: 'bd-hover-container',
+              onClick: function () {
+                return handleBusinessDropdownClick(link, title, ravenActionName);
+              }
             }, {
               children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
                 display: 'flex',
@@ -554,6 +671,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';
@@ -565,13 +683,33 @@
         backgroundGradient = _a.backgroundGradient,
         handleChipClick = _a.handleChipClick,
         chevronFillColor = _a.chevronFillColor;
-      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({
         display: 'flex',
         position: 'relative',
@@ -596,7 +734,7 @@
         onClick: handleClick
       }, {
         children: [jsxRuntime.jsx(ctDesignContainer.Container, {
-          style: {
+          css: {
             content: '""',
             position: 'absolute',
             inset: 0,
@@ -605,7 +743,7 @@
             zIndex: -2
           }
         }), jsxRuntime.jsx(ctDesignContainer.Container, {
-          style: {
+          css: {
             content: '""',
             position: 'absolute',
             inset: 0,
@@ -626,7 +764,7 @@
         })), jsxRuntime.jsx(ctDesignContainer.Container, __assign({
           display: 'flex',
           alignItems: 'center',
-          style: {
+          css: {
             overflow: 'hidden',
             maxWidth: isHovered ? 16 : 0,
             transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
@@ -691,24 +829,46 @@
         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({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         borderRadius: '8px',
         cursor: 'pointer',
-        style: {
+        css: {
           height: 32,
           paddingLeft: 8,
           paddingRight: isHovered ? 4 : 8,
@@ -739,7 +899,7 @@
         })), jsxRuntime.jsx(ctDesignContainer.Container, __assign({
           display: 'flex',
           alignItems: 'center',
-          style: {
+          css: {
             overflow: 'hidden',
             maxWidth: isHovered ? 16 : 0,
             transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
@@ -767,6 +927,12 @@
         hideWalletChip = _b.hideWalletChip,
         hideSupercoinsChip = _b.hideSupercoinsChip,
         hideLoyaltyChip = _b.hideLoyaltyChip;
+      var shouldShowLoyalty = loyaltyLoading || selectedLoyaltyType && LOYALTY_DATA[selectedLoyaltyType] && !hideLoyaltyChip;
+      var shouldShowSupercoin = superCoinsLoading || !hideSupercoinsChip;
+      var shouldShowWallet = walletLoading || !hideWalletChip;
+      if (!shouldShowLoyalty && !shouldShowSupercoin && !shouldShowWallet) {
+        return null;
+      }
       return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
         display: 'flex',
         padding: '0 16px 16px 16px',
@@ -799,7 +965,7 @@
           }),
           value: superCoinBalance,
           handleChipClick: supercoinsChipClick,
-          type: 'supercoins'
+          type: 'supercoin'
         }), walletLoading ? jsxRuntime.jsx(ctDesignContainer.Container, {
           width: '50px',
           height: '32px',
@@ -824,34 +990,51 @@
         userName = _b.userName,
         userMobileNumber = _b.userMobileNumber,
         countryCode = _b.countryCode,
-        userDetailsLoading = _b.userDetailsLoading;
+        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 _c = 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 = _c.userGreeting,
-        phoneNumber = _c.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]);
+      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({
@@ -898,7 +1081,7 @@
       }, {
         children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({
           padding: '16px',
-          height: '72px'
+          height: '76px'
         }, {
           children: renderUserData()
         })), jsxRuntime.jsx(RewardsSection, {}), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
@@ -907,7 +1090,7 @@
           padding: '8px',
           backgroundColor: 'white',
           rowGap: '8px',
-          style: {
+          css: {
             borderBottomLeftRadius: 12,
             borderBottomRightRadius: 12
           }
@@ -921,12 +1104,14 @@
               padding: '8px',
               borderRadius: '8px',
               cursor: 'pointer',
-              onClick: handleRedirectClick(redirectionLink)
+              onClick: function () {
+                return handleAccountOptionsClick(text, redirectionLink);
+              }
             }, {
               children: jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
                 display: 'flex',
                 cursor: 'pointer',
-                style: {
+                css: {
                   columnGap: '8px'
                 }
               }, {
@@ -943,7 +1128,7 @@
               }))
             }), "account-option-".concat(text));
           }), jsxRuntime.jsx(ctDesignDivider.Divider, {
-            style: {
+            css: {
               borderBottom: '1px dashed #E6E6E6'
             }
           }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
@@ -974,18 +1159,26 @@
     };
 
     var UserAccount = function () {
-      var isNovacThemeEnabled = useHeaderContext().isNovacThemeEnabled;
-      var _a = useHoverDropdown({
+      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;
-      var _b = react.useState(false),
-        scrolled = _b[0],
-        setScrolled = _b[1];
+        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);
@@ -995,8 +1188,20 @@
           return window.removeEventListener('scroll', handleScroll);
         };
       }, []);
-      var effectiveNovacThemeEnabled = isNovacThemeEnabled && !scrolled;
-      var hoverColor = effectiveNovacThemeEnabled ? '#FFB8A5' : '#FF4F17';
+      var theme = isNovacThemeEnabled && !scrolled ? THEME_CONFIG.NOVAC : THEME_CONFIG.DEFAULT;
+      var hoverColor = theme.hoverColor,
+        typographyColor = theme.typographyColor;
+      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({
           display: 'flex',
@@ -1005,18 +1210,19 @@
           borderRadius: '12px',
           height: '100%',
           cursor: 'pointer',
-          style: {
+          css: {
             columnGap: 8,
             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 ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+            color: isDropdownVisible ? hoverColor : typographyColor
           }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
             display: 'flex',
             flexDirection: 'row',
@@ -1027,13 +1233,13 @@
               css: {
                 cursor: 'pointer'
               },
-              colorCode: isDropdownVisible ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+              colorCode: isDropdownVisible ? hoverColor : typographyColor
             }, {
-              children: "My Account"
+              children: MY_ACCOUNT_TEXT
             })), jsxRuntime.jsx(ctDesignIcons.ChevronDown, {
               width: 20,
               height: 20,
-              fill: isDropdownVisible ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+              fill: isDropdownVisible ? hoverColor : typographyColor
             })]
           }))]
         })), jsxRuntime.jsx(HeaderAnimatedMask, __assign({
@@ -1058,21 +1264,23 @@
       }));
     };
     var HeaderContent = function () {
-      var _a = useHeaderContext(),
-        onLoginButtonClick = _a.onLoginButtonClick,
-        _b = _a.showAllLobs,
-        showAllLobs = _b === void 0 ? false : _b,
-        isUserLoggedIn = _a.isUserLoggedIn;
-        _a.loyaltyType;
-        var _c = _a.isNovacThemeEnabled,
-        isNovacThemeEnabled = _c === void 0 ? false : _c;
-        _a.ravenPayload;
-        _a.ravenPushCallback;
-        _a.ravenPageName;
-        _a.ravenEventName;
-      var _e = react.useState(false),
-        scrolled = _e[0],
-        setScrolled = _e[1];
+      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);
@@ -1082,18 +1290,49 @@
           return window.removeEventListener('scroll', handleScroll);
         };
       }, []);
-      var effectiveNovacThemeEnabled = isNovacThemeEnabled && !scrolled;
-      var headerBackground = effectiveNovacThemeEnabled ? 'transparent' : '#F7FAFF';
-      var hoverColor = effectiveNovacThemeEnabled ? '#FFB8A5' : '#FF4F17';
-      var _f = useHoverDropdown({
+      var theme = isNovacThemeEnabled && !scrolled ? THEME_CONFIG.NOVAC : THEME_CONFIG.DEFAULT;
+      var headerBackground = theme.headerBackground,
+        logoFill = theme.logoFill,
+        loginButtonColorVariant = theme.loginButtonColorVariant,
+        hoverColor = theme.hoverColor,
+        fkcompanyColor = theme.fkcompanyColor,
+        typographyColor = theme.typographyColor;
+      var _g = useHoverDropdown({
           openDelay: 0
         }),
-        isDropdownVisible = _f.isDropdownVisible,
-        hoveredElemIndex = _f.hoveredElemIndex,
-        handleOnMouseEnter = _f.handleOnMouseEnter,
-        handleOnMouseLeave = _f.handleOnMouseLeave,
-        handleDropdownMouseEnter = _f.handleDropdownMouseEnter,
-        handleDropdownMouseLeave = _f.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({
           display: 'flex',
@@ -1108,7 +1347,7 @@
           css: {
             gap: '24px',
             flexShrink: 0,
-            borderBottom: effectiveNovacThemeEnabled ? '' : '1px solid #E6E6E6',
+            borderBottom: headerBackground === 'transparent' ? '' : '1px solid #E6E6E6',
             transition: 'background-color 0.3s ease-in-out, border-bottom 0.3s ease-in-out'
           }
         }, {
@@ -1118,7 +1357,7 @@
             justifyContent: 'space-between',
             padding: '0 28px',
             flex: 1,
-            style: {
+            css: {
               gap: '24px',
               maxWidth: 1440
             }
@@ -1129,13 +1368,10 @@
               alignItems: 'center',
               justifyContent: 'center',
               cursor: 'pointer',
-              paddingLeft: '16px',
-              onClick: function () {
-                window.location.href = '/';
-              }
+              onClick: handleHomeClick
             }, {
               children: [jsxRuntime.jsx(ctDesignIcons.CTLogo, {
-                fillColor: effectiveNovacThemeEnabled ? '#FFF' : '#FF4F17'
+                fillColor: logoFill
               }), jsxRuntime.jsx(ctDesignDivider.Divider, {
                 css: {
                   width: 12,
@@ -1145,7 +1381,7 @@
                   borderBottom: '1px solid #e0e0e0'
                 }
               }), jsxRuntime.jsx(ctDesignIcons.Fkcompany, {
-                color: effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+                color: fkcompanyColor
               })]
             })), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
               display: 'flex',
@@ -1162,11 +1398,18 @@
                 columnGap: '4px'
               }, {
                 children: NAVBAR_OPTIONS.map(function (option, index) {
+                  var text = option.text,
+                    LeftIcon = option.lefticon,
+                    RightIcon = option.rightIcon,
+                    isHoverable = option.isHoverable;
                   var isHovered = hoveredElemIndex === index;
                   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,
                       display: 'flex',
@@ -1178,13 +1421,11 @@
                       columnGap: 8,
                       height: '64px',
                       onClick: function () {
-                        if (option.link && option.isClickable) {
-                          window.location.href = option.link;
-                        }
+                        return handleNavbarOptionsClick(option);
                       }
                     }, {
-                      children: [jsxRuntime.jsx(option.lefticon, {
-                        color: isHovered ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+                      children: [jsxRuntime.jsx(LeftIcon, {
+                        color: isHovered ? hoverColor : typographyColor
                       }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
                         display: 'flex',
                         flexDirection: 'row',
@@ -1192,31 +1433,31 @@
                       }, {
                         children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
                           variant: 'B2',
-                          colorCode: isHovered ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A',
+                          colorCode: isHovered ? hoverColor : typographyColor,
                           isClickable: true
                         }, {
-                          children: option.text
-                        })), option.rightIcon && jsxRuntime.jsx(option.rightIcon, {
+                          children: text
+                        })), RightIcon && jsxRuntime.jsx(RightIcon, {
                           width: 20,
                           height: 20,
-                          fill: isHovered ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+                          fill: isHovered ? hoverColor : typographyColor
                         })]
                       }))]
                     }), "nav-option-".concat(index)), jsxRuntime.jsx(HeaderAnimatedMask, __assign({
-                      show: hoveredElemIndex === index && option.isHoverable && isDropdownVisible,
+                      show: hoveredElemIndex === index && isHoverable && isDropdownVisible,
                       marginTop: '64px',
                       handleDropdownMouseEnter: handleDropdownMouseEnter,
                       handleDropdownMouseLeave: handleDropdownMouseLeave,
                       onMaskClick: handleDropdownMouseLeave
                     }, {
                       children: jsxRuntime.jsx(BusinessDropdownContent, {
-                        isOpen: hoveredElemIndex === index && option.isHoverable && isDropdownVisible
+                        isOpen: hoveredElemIndex === index && isHoverable && isDropdownVisible
                       })
                     }))]
                   });
                 })
               })), isUserLoggedIn && jsxRuntime.jsx(ctDesignDivider.Divider, {
-                style: {
+                css: {
                   width: 12,
                   margin: '0 -18px',
                   transform: 'rotate(90deg)',
@@ -1230,21 +1471,22 @@
                 }, {
                   children: jsxRuntime.jsx(UserAccount, {})
                 })) : jsxRuntime.jsx(ctDesignButton.Button, __assign({
-                  className: "fw-400 fs-14 ".concat(effectiveNovacThemeEnabled ? 'novac-login-button' : 'login-button'),
+                  variant: 'outline',
+                  color: loginButtonColorVariant,
+                  className: "".concat(headerBackground === 'transparent' ? 'novac-login-button' : 'login-button'),
                   onClick: onLoginButtonClick,
-                  style: {
+                  css: {
                     width: 153,
-                    height: 40,
-                    border: effectiveNovacThemeEnabled ? '1px solid #FFF' : '1px solid #1A1A1A'
+                    height: 40
                   },
                   loading: false
                 }, {
                   children: jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
                     componentNode: 'span',
                     variant: 'L2',
-                    color: effectiveNovacThemeEnabled ? 'neutral' : 'primary'
+                    color: loginButtonColorVariant === ctDesignButton.ButtonColor.NEUTRAL ? 'neutral' : 'primary'
                   }, {
-                    children: "Login"
+                    children: LOG_IN_TEXT
                   }))
                 }))
               })]