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

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

@@ -16,27 +16,23 @@ var SUPPORT_URL = '/support';
 var NAVBAR_OPTIONS = [{
   lefticon: ctDesignIcons.Offers,
   text: 'Offers',
-  ravenActionName: 'offers',
   isHoverable: false,
   isClickable: true,
   link: OFFERS_URL
 }, {
   lefticon: ctDesignIcons.BusinessBag,
   text: 'Business',
-  ravenActionName: 'business',
   rightIcon: ctDesignIcons.ChevronDown,
   isHoverable: true
 }, {
   lefticon: ctDesignIcons.MyTrips,
   text: 'My Trips',
-  ravenActionName: 'mytrips',
   isHoverable: false,
   isClickable: true,
   link: MY_TRIPS_URL
 }, {
   lefticon: ctDesignIcons.SupportIcon,
   text: 'Support',
-  ravenActionName: 'support',
   isHoverable: false,
   isClickable: true,
   link: SUPPORT_URL
@@ -72,14 +68,11 @@ var LOB_DATA = [{
 var bdConfig = [{
   title: 'AgentBox',
   subtitle: 'For travel agents',
-  details: 'One-stop travel solution offering the best deals to our travel agency partners',
-  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',
@@ -92,12 +85,12 @@ var bdConfig = [{
   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";
@@ -124,18 +117,23 @@ var HeaderProvider = function (_a) {
 var LobsHeader = function () {
   var selectedLOB = useHeaderContext().selectedLOB;
   return jsxRuntime.jsx(ctDesignContainer.Container, tslib.__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, tslib.__assign({
-        className: 'flex flex-middle c-pointer',
+        display: 'flex',
+        alignItems: 'center',
+        cursor: 'pointer',
         css: {
           gap: 8,
           background: selectedLOB === item.title ? '#FFFFFF' : 'transparent',
@@ -359,85 +357,11 @@ var useDropdownAnimation = function (isOpen) {
   };
 };
 
-var stringifyPayload = function (payload) {
-  var keys = Object.keys(payload);
-  var numericValues = [];
-  keys.forEach(function (key) {
-    if (numericValues.includes(key)) {
-      payload[key] = Number(payload[key]);
-    } else {
-      payload[key] = '' + payload[key];
-    }
-  });
-  return payload;
-};
-var isServer = function () {
-  return typeof window === 'undefined' || !window;
-};
-var getQueryParam = function (queryParam) {
-  if (isServer()) {
-    return '';
-  }
-  var urlParams = new URLSearchParams(window.location.search);
-  return urlParams.get(queryParam);
-};
-var ravenLoyaltyTypes = function (loyaltyType) {
-  switch (loyaltyType) {
-    case 'FkVip':
-      return 'fk_vip';
-    case 'FkPremium':
-      return 'fk_plus_premium';
-    case 'InsiderIcon':
-      return 'myntra_insidericon';
-    case 'InsiderElite':
-      return 'myntra_insiderelite';
-    default:
-      return '';
-  }
-};
-var ravenSDKTrigger = function (isUserLoggedIn, eventName, ravenPayload, customRavenPayload, ravenPushCallback, pageName) {
-  var _a;
-  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 = tslib.__assign(tslib.__assign(tslib.__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 () {
@@ -456,74 +380,54 @@ var BusinessDropdownContent = function (_a) {
       return window.removeEventListener('resize', updatePosition);
     };
   }, [containerRef, leftPosition]);
-  var handleBusinessDropdownClick = react.useCallback(function (link, title, ravenActionName) {
-    var _a;
-    var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
-    var actionName = ravenActionName ? "".concat(ravenActionName, "_business_click") : title ? "".concat(title.toLowerCase(), "_business_click") : '';
-    var defaultPayload = {
-      action_name: actionName,
-      action_type: 'click',
-      u_utm_source: utmSource,
-      loyalty_type: ravenLoyaltyTypes(loyaltyType)
-    };
-    if (link) {
-      ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
-      window.location.href = link;
-    }
-  }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, loyaltyType]);
   return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
     ref: containerRef,
-    className: 'bg-neutral-100 o-hidden',
+    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, tslib.__assign({
-      className: 'px-6 py-5',
+      padding: '20px 24px 20px 24px',
       backgroundColor: '#FFF1EC'
     }, {
       children: jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
         variant: 'HM2',
-        style: {
+        css: {
           lineHeight: '24px'
         }
       }, {
         children: BUSINESS_DROPDOWN_HEADING
       }))
     })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__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, tslib.__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, tslib.__assign({
-            className: 'flex flex-row flex-middle',
-            style: {
-              columnGap: '8px'
-            }
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            columnGap: '8px'
           }, {
             children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
               variant: 'HM2',
@@ -533,8 +437,8 @@ var BusinessDropdownContent = function (_a) {
             })), jsxRuntime.jsx(AnimatedArrow, {})]
           })), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
             variant: 'B3',
-            className: 'mt-1',
             css: {
+              marginTop: '4px',
               opacity: 0.75
             }
           }, {
@@ -542,7 +446,9 @@ var BusinessDropdownContent = function (_a) {
           })), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
             variant: 'P3',
             color: 'subheading',
-            className: 'mt-3'
+            css: {
+              marginTop: '12px'
+            }
           }, {
             children: details
           }))]
@@ -614,7 +520,6 @@ var ACCOUNT_OPTIONS_POPUP_CONFIG = [{
   redirectionLink: 'accounts/personal-data-dashboard'
 }];
 var SIGN_OUT_TEXT = 'Logout';
-var MY_ACCOUNT_TEXT = 'My Account';
 var LOGGEDIN_USER_TEXT = 'You are logged in with';
 var HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID = 'header-acc-btn';
 var ACCOUNT_OPTIONS_CONTAINER_ID = 'account-options';
@@ -626,40 +531,27 @@ var LoyaltyChip = function (_a) {
     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, tslib.__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);
@@ -692,12 +584,16 @@ var LoyaltyChip = function (_a) {
         zIndex: -1
       }
     }), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
-      className: 'flex flex-middle p-relative'
+      display: 'flex',
+      alignItems: 'center',
+      position: 'relative'
     }, {
       children: icon
     })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__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
@@ -761,41 +657,23 @@ var ExpandableItem = function (_a) {
     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, tslib.__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,
@@ -812,18 +690,23 @@ var ExpandableItem = function (_a) {
     onClick: handleDefaultClick
   }, {
     children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
-      className: 'flex flex-middle flex-gap-1'
+      display: 'flex',
+      alignItems: 'center',
+      css: {
+        gap: '4px'
+      }
     }, {
       children: [icon, jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
         variant: 'B3',
-        className: 'value-text',
         isClickable: true
       }, {
         children: value
       }))]
     })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__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
@@ -850,16 +733,13 @@ var RewardsSection = function () {
     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, tslib.__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, {
@@ -883,7 +763,7 @@ var RewardsSection = function () {
       }),
       value: superCoinBalance,
       handleChipClick: supercoinsChipClick,
-      type: 'supercoin'
+      type: 'supercoins'
     }), walletLoading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
       width: '50px',
       height: '32px',
@@ -907,51 +787,34 @@ var AccountDropdownContent = function (_a) {
     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, tslib.__assign({
@@ -965,7 +828,11 @@ var AccountDropdownContent = function (_a) {
       }));
     };
     return jsxRuntime.jsx(ctDesignContainer.Container, tslib.__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')]
@@ -977,28 +844,33 @@ var AccountDropdownContent = function (_a) {
   return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__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, tslib.__assign({
-      className: 'p-4',
-      height: '76px'
+      padding: '16px',
+      height: '72px'
     }, {
       children: renderUserData()
     })), jsxRuntime.jsx(RewardsSection, {}), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__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) {
@@ -1006,20 +878,26 @@ var AccountDropdownContent = function (_a) {
           icon = _a.icon,
           redirectionLink = _a.redirectionLink;
         return jsxRuntime.jsx(ctDesignContainer.Container, tslib.__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, tslib.__assign({
-            className: 'flex c-pointer',
+            display: 'flex',
+            cursor: 'pointer',
             style: {
               columnGap: '8px'
             }
           }, {
             children: [icon, jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
               variant: 'P1',
-              className: 'flex flex-middle c-pointer'
+              css: {
+                display: 'flex',
+                alignItems: 'center',
+                cursor: 'pointer'
+              }
             }, {
               children: text
             }))]
@@ -1030,15 +908,23 @@ var AccountDropdownContent = function (_a) {
           borderBottom: '1px dashed #E6E6E6'
         }
       }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__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, tslib.__assign({
           variant: 'P1',
-          className: 'flex flex-middle c-pointer',
+          css: {
+            display: 'flex',
+            alignItems: 'center',
+            cursor: 'pointer'
+          },
           color: 'warning'
         }, {
           children: SIGN_OUT_TEXT
@@ -1049,26 +935,18 @@ var AccountDropdownContent = function (_a) {
 };
 
 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);
@@ -1080,27 +958,20 @@ var UserAccount = function () {
   }, []);
   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, tslib.__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
@@ -1108,14 +979,18 @@ var UserAccount = function () {
       children: [jsxRuntime.jsx(ctDesignIcons.MyAccount, {
         color: isDropdownVisible ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
       }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
-        className: 'flex flex-row flex-middle'
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center'
       }, {
         children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__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,
@@ -1144,23 +1019,21 @@ var Header = function (props) {
   }));
 };
 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);
@@ -1173,69 +1046,59 @@ var HeaderContent = function () {
   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, tslib.__assign({
-      className: 'flex t-0 p-sticky w-100p flex-middle flex-center flex-gap-6 flex-no-shrink',
-      style: {
-        zIndex: 1000,
-        height: 64,
+      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, tslib.__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, tslib.__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,
@@ -1246,35 +1109,47 @@ var HeaderContent = function () {
             color: effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
           })]
         })), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__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, tslib.__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, tslib.__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, tslib.__assign({
-                    className: 'flex flex-row flex-middle'
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center'
                   }, {
                     children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
                       variant: 'B2',
@@ -1310,7 +1185,9 @@ var HeaderContent = function () {
             }
           }), jsxRuntime.jsx(ctDesignContainer.Container, {
             children: isUserLoggedIn ? jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
-              className: 'flex flex-row flex-middle'
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center'
             }, {
               children: jsxRuntime.jsx(UserAccount, {})
             })) : jsxRuntime.jsx(ctDesignButton.Button, tslib.__assign({
@@ -1328,7 +1205,7 @@ var HeaderContent = function () {
                 variant: 'L2',
                 color: effectiveNovacThemeEnabled ? 'neutral' : 'primary'
               }, {
-                children: "Log in"
+                children: "Login"
               }))
             }))
           })]