@cleartrip/ct-design-header 1.2.0-SNAPSHOT-header-v0.4-raven-test.0 → 1.2.0-SNAPSHOT-test-logo-left-padding.0

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

@@ -50,27 +50,23 @@
     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
@@ -106,14 +102,11 @@
     var bdConfig = [{
       title: 'AgentBox',
       subtitle: 'For travel agents',
-      details: 'One-stop travel solution offering the best deals to our travel agency partners',
-      link: 'https://agency.cleartrip.com'
+      details: 'One-stop travel solution offering the best deals to our travel agency partners'
     }, {
       title: 'OutOfOffice',
       subtitle: 'For startups, corporates and SMEs',
-      details: 'Manage corporate business travel, smartly',
-      link: 'https://ooo.cleartrip.com/',
-      ravenActionName: 'ooo'
+      details: 'Manage corporate business travel, smartly'
     }, {
       title: 'MICE',
       subtitle: 'For corporate events',
@@ -126,12 +119,12 @@
       link: 'https://business.cleartrip.com/api-customers/more-details'
     }];
     var BUSINESS_DROPDOWN_HEADING = 'Other business services';
-    exports.RAVEN_PAGE_NAMES = void 0;
+    var RAVEN_PAGE_NAMES;
     (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 = {}));
+    })(RAVEN_PAGE_NAMES || (RAVEN_PAGE_NAMES = {}));
     var RAVEN_PLATFORMS;
     (function (RAVEN_PLATFORMS) {
       RAVEN_PLATFORMS["DESKTOP"] = "desktop";
@@ -158,18 +151,23 @@
     var LobsHeader = function () {
       var selectedLOB = useHeaderContext().selectedLOB;
       return jsxRuntime.jsx(ctDesignContainer.Container, __assign({
-        className: 'flex p-4 flex-middle flex-center',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '16px',
+        height: '64',
+        background: '#F3F5FA',
+        top: '64px',
+        zIndex: 2,
         css: {
-          gap: 40,
-          height: 64,
-          background: ' #F3F5FA',
-          top: 64,
-          zIndex: 2
+          gap: 40
         }
       }, {
         children: LOB_DATA.map(function (item, index) {
           return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
-            className: 'flex flex-middle c-pointer',
+            display: 'flex',
+            alignItems: 'center',
+            cursor: 'pointer',
             css: {
               gap: 8,
               background: selectedLOB === item.title ? '#FFFFFF' : 'transparent',
@@ -393,85 +391,11 @@
       };
     };
 
-    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 = 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 _b = react.useState(0),
+        leftPosition = _b[0],
+        setLeftPosition = _b[1];
       var containerRef = useDropdownAnimation(isOpen).containerRef;
       react.useEffect(function () {
         var updatePosition = function () {
@@ -490,74 +414,54 @@
           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',
+        backgroundColor: '#fff',
+        top: '76px',
+        position: 'fixed',
+        left: "".concat(leftPosition, "px"),
+        borderRadius: 24,
+        boxShadow: '0px 8px 24px 0px rgba(26, 26, 26, 0.10)',
+        width: 'fit-content',
+        zIndex: 1002,
         css: {
-          top: '76px',
-          position: 'fixed',
-          left: "".concat(leftPosition, "px"),
-          borderRadius: 24,
-          boxShadow: '0px 8px 24px 0px rgba(26, 26, 26, 0.10)',
-          width: 'fit-content',
-          zIndex: 1002,
+          overflow: 'hidden',
           opacity: 0
         }
       }, {
         children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({
-          className: 'px-6 py-5',
+          padding: '20px 24px 20px 24px',
           backgroundColor: '#FFF1EC'
         }, {
           children: jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
             variant: 'HM2',
-            style: {
+            css: {
               lineHeight: '24px'
             }
           }, {
             children: BUSINESS_DROPDOWN_HEADING
           }))
         })), jsxRuntime.jsx(ctDesignContainer.Container, __assign({
-          className: 'flex flex-row p-6',
-          css: {
-            columnGap: '48px',
-            width: 'fit-content'
-          }
+          display: 'flex',
+          flexDirection: 'row',
+          padding: '24px',
+          columnGap: '48px',
+          width: 'fit-content'
         }, {
           children: bdConfig.map(function (_a) {
             var title = _a.title,
               subtitle = _a.subtitle,
-              details = _a.details,
-              link = _a.link,
-              ravenActionName = _a.ravenActionName;
+              details = _a.details;
             return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
-              css: {
-                width: '200px'
-              },
-              onClick: function () {
-                return handleBusinessDropdownClick(link, title, ravenActionName);
-              },
-              className: 'bd-hover-container c-pointer'
+              cursor: 'pointer',
+              width: '200px',
+              className: 'bd-hover-container'
             }, {
               children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
-                className: 'flex flex-row flex-middle',
-                style: {
-                  columnGap: '8px'
-                }
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                columnGap: '8px'
               }, {
                 children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
                   variant: 'HM2',
@@ -567,8 +471,8 @@
                 })), jsxRuntime.jsx(AnimatedArrow, {})]
               })), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
                 variant: 'B3',
-                className: 'mt-1',
                 css: {
+                  marginTop: '4px',
                   opacity: 0.75
                 }
               }, {
@@ -576,7 +480,9 @@
               })), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
                 variant: 'P3',
                 color: 'subheading',
-                className: 'mt-3'
+                css: {
+                  marginTop: '12px'
+                }
               }, {
                 children: details
               }))]
@@ -648,7 +554,6 @@
       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';
@@ -660,40 +565,27 @@
         backgroundGradient = _a.backgroundGradient,
         handleChipClick = _a.handleChipClick,
         chevronFillColor = _a.chevronFillColor;
-      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]);
+      var _b = react.useState(false),
+        isHovered = _b[0],
+        setIsHovered = _b[1];
+      var handleClick = function () {
+        window.location.href = '/';
+        handleChipClick && handleChipClick();
+      };
       return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
-        className: 'flex p-relative flex-middle flex-center br-8 o-hidden c-pointer',
-        style: {
+        display: 'flex',
+        position: 'relative',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: '8px',
+        cursor: 'pointer',
+        paddingLeft: '8px',
+        paddingRight: isHovered ? '4px' : '8px',
+        css: {
+          overflow: 'hidden',
           height: 32,
           paddingLeft: 8,
-          transition: 'padding-right 0.2s ease-in-out',
-          paddingRight: isHovered ? 4 : 8
+          transition: 'padding-right 0.2s ease-in-out'
         },
         onMouseEnter: function () {
           return setIsHovered(true);
@@ -726,12 +618,16 @@
             zIndex: -1
           }
         }), jsxRuntime.jsx(ctDesignContainer.Container, __assign({
-          className: 'flex flex-middle p-relative'
+          display: 'flex',
+          alignItems: 'center',
+          position: 'relative'
         }, {
           children: icon
         })), jsxRuntime.jsx(ctDesignContainer.Container, __assign({
-          className: 'flex flex-middle o-hidden',
+          display: 'flex',
+          alignItems: 'center',
           style: {
+            overflow: 'hidden',
             maxWidth: isHovered ? 16 : 0,
             transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
             opacity: isHovered ? 0.5 : 0
@@ -795,41 +691,23 @@
         handleChipClick = _a.handleChipClick,
         value = _a.value,
         type = _a.type;
-      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];
-          }
+      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';
         }
-      }, [handleChipClick, type, loyaltyType, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
+        handleChipClick && handleChipClick();
+      };
       return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
-        className: "flex flex-middle justify-center br-8 c-pointer",
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: '8px',
+        cursor: 'pointer',
         style: {
           height: 32,
           paddingLeft: 8,
@@ -846,18 +724,23 @@
         onClick: handleDefaultClick
       }, {
         children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
-          className: 'flex flex-middle flex-gap-1'
+          display: 'flex',
+          alignItems: 'center',
+          css: {
+            gap: '4px'
+          }
         }, {
           children: [icon, jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
             variant: 'B3',
-            className: 'value-text',
             isClickable: true
           }, {
             children: value
           }))]
         })), jsxRuntime.jsx(ctDesignContainer.Container, __assign({
-          className: 'flex flex-middle o-hidden',
+          display: 'flex',
+          alignItems: 'center',
           style: {
+            overflow: 'hidden',
             maxWidth: isHovered ? 16 : 0,
             transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
             opacity: isHovered ? 1 : 0
@@ -884,16 +767,13 @@
         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({
-        className: 'flex p-4 pt-0 flex-start flex-gap-1',
-        style: {
-          alignSelf: 'stretch'
+        display: 'flex',
+        padding: '0 16px 16px 16px',
+        justifyContent: 'flex-start',
+        css: {
+          alignSelf: 'stretch',
+          gap: '4px'
         }
       }, {
         children: [loyaltyLoading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
@@ -917,7 +797,7 @@
           }),
           value: superCoinBalance,
           handleChipClick: supercoinsChipClick,
-          type: 'supercoin'
+          type: 'supercoins'
         }), walletLoading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
           width: '50px',
           height: '32px',
@@ -941,51 +821,34 @@
         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;
+        userDetailsLoading = _b.userDetailsLoading;
       var containerRef = useDropdownAnimation(isOpen).containerRef;
-      var _d = react.useMemo(function () {
+      var _c = react.useMemo(function () {
+          var userGreeting = userName && "Hello ".concat(userName, "!");
+          var phoneNumber = countryCode && userMobileNumber ? "".concat(countryCode, " ").concat(userMobileNumber) : '';
           return {
-            userGreeting: userName ? "Hello ".concat(userName, "!") : '',
-            phoneNumber: countryCode && userMobileNumber ? "".concat(countryCode, " ").concat(userMobileNumber) : ''
+            userGreeting: userGreeting,
+            phoneNumber: phoneNumber
           };
         }, [userName, userMobileNumber, countryCode]),
-        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)
+        userGreeting = _c.userGreeting,
+        phoneNumber = _c.phoneNumber;
+      var handleRedirectClick = function (redirectLink) {
+        return function () {
+          window.location.href = redirectLink;
         };
       };
-      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 () {
+      react.useEffect(function () {
         var headerAccBtn = document.getElementById(HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID);
         var accountOptionsElem = document.getElementById(ACCOUNT_OPTIONS_CONTAINER_ID);
-        if (headerAccBtn && accountOptionsElem) {
-          var headerBtnRight = headerAccBtn.getBoundingClientRect().right;
-          accountOptionsElem.style.left = "".concat(headerBtnRight - ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px");
-        }
-      }, []);
-      react.useEffect(function () {
+        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();
-      }, [positionAccountOptionsDiv]);
+      }, []);
       var renderUserData = function () {
         var renderContent = function (loading, content, variant, color) {
           return jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
@@ -999,7 +862,11 @@
           }));
         };
         return jsxRuntime.jsx(ctDesignContainer.Container, __assign({
-          className: 'flex flex-column flex-gap-1'
+          display: 'flex',
+          flexDirection: 'column',
+          css: {
+            gap: '4px'
+          }
         }, {
           children: userGreeting ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [renderContent(userDetailsLoading, userGreeting, 'HM3', 'primary'), renderContent(userDetailsLoading, "".concat(LOGGEDIN_USER_TEXT, " ").concat(phoneNumber), 'P3', 'subheading')]
@@ -1011,28 +878,33 @@
       return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
         id: ACCOUNT_OPTIONS_CONTAINER_ID,
         ref: containerRef,
-        className: 'flex flex-column br-16 o-hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        borderRadius: '16px',
+        zIndex: 1002,
+        top: '76px',
+        position: 'fixed',
         css: {
-          zIndex: 1002,
           opacity: 0,
-          top: '76px',
-          position: 'fixed'
+          overflow: 'hidden'
         },
         width: "".concat(ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px"),
         background: '#FFF1EC'
       }, {
         children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({
-          className: 'p-4',
-          height: '76px'
+          padding: '16px',
+          height: '72px'
         }, {
           children: renderUserData()
         })), jsxRuntime.jsx(RewardsSection, {}), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
-          className: 'p-2 flex flex-column',
+          display: 'flex',
+          flexDirection: 'column',
+          padding: '8px',
           backgroundColor: 'white',
+          rowGap: '8px',
           style: {
             borderBottomLeftRadius: 12,
-            borderBottomRightRadius: 12,
-            rowGap: 8
+            borderBottomRightRadius: 12
           }
         }, {
           children: [ACCOUNT_OPTIONS_POPUP_CONFIG.map(function (_a) {
@@ -1040,20 +912,26 @@
               icon = _a.icon,
               redirectionLink = _a.redirectionLink;
             return jsxRuntime.jsx(ctDesignContainer.Container, __assign({
-              className: 'p-2 br-8 c-pointer hoverable-container',
-              onClick: function () {
-                return handleAccountOptionsClick(text, redirectionLink);
-              }
+              className: 'hoverable-container',
+              padding: '8px',
+              borderRadius: '8px',
+              cursor: 'pointer',
+              onClick: handleRedirectClick(redirectionLink)
             }, {
               children: jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
-                className: 'flex c-pointer',
+                display: 'flex',
+                cursor: 'pointer',
                 style: {
                   columnGap: '8px'
                 }
               }, {
                 children: [icon, jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
                   variant: 'P1',
-                  className: 'flex flex-middle c-pointer'
+                  css: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    cursor: 'pointer'
+                  }
                 }, {
                   children: text
                 }))]
@@ -1064,15 +942,23 @@
               borderBottom: '1px dashed #E6E6E6'
             }
           }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
-            className: 'flex p-2 br-8 c-pointer logout-button',
-            onClick: handleLogout
+            className: 'logout-button',
+            display: 'flex',
+            padding: '8px',
+            borderRadius: '8px',
+            cursor: 'pointer',
+            onClick: handleLogoutClick
           }, {
             children: [jsxRuntime.jsx(ctDesignIcons.Signout, {
               height: 24,
               width: 24
             }), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
               variant: 'P1',
-              className: 'flex flex-middle c-pointer',
+              css: {
+                display: 'flex',
+                alignItems: 'center',
+                cursor: 'pointer'
+              },
               color: 'warning'
             }, {
               children: SIGN_OUT_TEXT
@@ -1083,26 +969,18 @@
     };
 
     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({
+      var isNovacThemeEnabled = useHeaderContext().isNovacThemeEnabled;
+      var _a = useHoverDropdown({
           openDelay: 0
         }),
-        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];
+        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];
       react.useEffect(function () {
         var handleScroll = function () {
           setScrolled(window.scrollY >= 100);
@@ -1114,27 +992,20 @@
       }, []);
       var effectiveNovacThemeEnabled = isNovacThemeEnabled && !scrolled;
       var hoverColor = effectiveNovacThemeEnabled ? '#FFB8A5' : '#FF4F17';
-      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",
+          display: 'flex',
+          padding: '8px 12px',
+          alignItems: 'center',
+          borderRadius: '12px',
+          height: '100%',
+          cursor: 'pointer',
           style: {
             columnGap: 8,
             height: 64
           },
           onMouseEnter: function () {
-            handleOnMouseEnter(0);
-            triggerRavenEventOnHover();
+            return handleOnMouseEnter(0);
           },
           onMouseLeave: handleOnMouseLeave,
           id: HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID
@@ -1142,14 +1013,18 @@
           children: [jsxRuntime.jsx(ctDesignIcons.MyAccount, {
             color: isDropdownVisible ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
           }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
-            className: 'flex flex-row flex-middle'
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center'
           }, {
             children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
               variant: 'B2',
-              className: 'c-pointer',
+              css: {
+                cursor: 'pointer'
+              },
               colorCode: isDropdownVisible ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
             }, {
-              children: MY_ACCOUNT_TEXT
+              children: "My Account"
             })), jsxRuntime.jsx(ctDesignIcons.ChevronDown, {
               width: 20,
               height: 20,
@@ -1178,23 +1053,21 @@
       }));
     };
     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];
+      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];
       react.useEffect(function () {
         var handleScroll = function () {
           setScrolled(window.scrollY >= 100);
@@ -1207,69 +1080,59 @@
       var effectiveNovacThemeEnabled = isNovacThemeEnabled && !scrolled;
       var headerBackground = effectiveNovacThemeEnabled ? 'transparent' : '#F7FAFF';
       var hoverColor = effectiveNovacThemeEnabled ? '#FFB8A5' : '#FF4F17';
-      var _g = useHoverDropdown({
+      var _f = useHoverDropdown({
           openDelay: 0
         }),
-        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]);
+        isDropdownVisible = _f.isDropdownVisible,
+        hoveredElemIndex = _f.hoveredElemIndex,
+        handleOnMouseEnter = _f.handleOnMouseEnter,
+        handleOnMouseLeave = _f.handleOnMouseLeave,
+        handleDropdownMouseEnter = _f.handleDropdownMouseEnter,
+        handleDropdownMouseLeave = _f.handleDropdownMouseLeave;
       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,
+          display: 'flex',
+          top: 0,
+          position: 'sticky',
+          width: '100%',
+          alignItems: 'center',
+          justifyContent: 'center',
+          zIndex: 1000,
+          height: '64px',
+          background: headerBackground,
+          css: {
+            gap: '24px',
+            flexShrink: 0,
             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({
-            className: 'flex flex-middle flex-between flex-gap-6',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '0 28px',
+            flex: 1,
             style: {
-              maxWidth: 1440,
-              padding: '0px 28px',
-              flex: '1 0 0'
+              gap: '24px',
+              maxWidth: 1440
             }
           }, {
             children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
-              className: 'flex flex-row flex-center flex-middle c-pointer',
-              onClick: handleHomeClick
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+              cursor: 'pointer',
+              paddingLeft: '16px',
+              onClick: function () {
+                window.location.href = '/';
+              }
             }, {
               children: [jsxRuntime.jsx(ctDesignIcons.CTLogo, {
                 fillColor: effectiveNovacThemeEnabled ? '#FFF' : '#FF4F17'
               }), jsxRuntime.jsx(ctDesignDivider.Divider, {
-                style: {
+                css: {
                   width: 12,
                   marginLeft: 2,
                   marginRight: 2,
@@ -1280,35 +1143,47 @@
                 color: effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
               })]
             })), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
-              className: 'flex flex-row flex-middle flex-center flex-cg-6'
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+              columnGap: '24px'
             }, {
               children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({
-                className: 'flex flex-row flex-middle flex-center flex-cg-1'
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                columnGap: '4px'
               }, {
                 children: NAVBAR_OPTIONS.map(function (option, index) {
                   var isHovered = hoveredElemIndex === index;
                   return jsxRuntime.jsxs(ctDesignContainer.Container, {
                     children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
                       onMouseEnter: function () {
-                        handleOnMouseEnter(index);
-                        if (option.isHoverable) {
-                          triggerRavenEventOnHover(option);
-                        }
+                        return handleOnMouseEnter(index);
                       },
                       onMouseLeave: handleOnMouseLeave,
-                      className: 'flex flex-row flex-middle px-3 py-2 c-pointer p-relative',
-                      style: {
-                        columnGap: 8,
-                        height: 64
-                      },
+                      display: 'flex',
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      padding: '8px 12px 8px 12px',
+                      cursor: 'pointer',
+                      position: 'relative',
+                      columnGap: 8,
+                      height: '64px',
                       onClick: function () {
-                        return handleNavbarOptionsClick(option);
+                        if (option.link && option.isClickable) {
+                          window.location.href = option.link;
+                        }
                       }
                     }, {
                       children: [jsxRuntime.jsx(option.lefticon, {
                         color: isHovered ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
                       }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
-                        className: 'flex flex-row flex-middle'
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center'
                       }, {
                         children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
                           variant: 'B2',
@@ -1344,7 +1219,9 @@
                 }
               }), jsxRuntime.jsx(ctDesignContainer.Container, {
                 children: isUserLoggedIn ? jsxRuntime.jsx(ctDesignContainer.Container, __assign({
-                  className: 'flex flex-row flex-middle'
+                  display: 'flex',
+                  flexDirection: 'row',
+                  alignItems: 'center'
                 }, {
                   children: jsxRuntime.jsx(UserAccount, {})
                 })) : jsxRuntime.jsx(ctDesignButton.Button, __assign({