@cleartrip/ct-design-header 1.2.0-SNAPSHOT-testpeekCarousel.0 → 1.2.0-SNAPSHOT-rnwStable4Dec25.0

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

@@ -6,718 +6,537 @@ import { Typography, TypographyVariant } from '@cleartrip/ct-design-typography';
 import { ButtonColor, Button, ButtonVariant } from '@cleartrip/ct-design-button';
 import { Divider } from '@cleartrip/ct-design-divider';
 import { Offers, BusinessBag, ChevronDown, MyTrips, SupportIcon, ArrowRight, MyAccount, SavedCard, Travellers, HiFive, Wallet, SettingsCog, PrivacyRights, HeaderChevronRight, FkBlackIcon, FkGold, InsiderIcon, InsiderElite, CtLoyalty, Supercoin, Signout, CTLogo, Fkcompany } from '@cleartrip/ct-design-icons';
-import styled, { keyframes } from 'styled-components';
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
 
 var OFFERS_URL = 'all-offers/?categories=flights';
 var MY_TRIPS_URL = '/account/trips';
 var SUPPORT_URL = '/support';
-var NAVBAR_OPTIONS = [{
-  lefticon: Offers,
-  text: 'Offers',
-  ravenActionName: 'offers',
-  isHoverable: false,
-  isClickable: true,
-  link: OFFERS_URL
-}, {
-  lefticon: BusinessBag,
-  text: 'Business',
-  ravenActionName: 'business',
-  rightIcon: ChevronDown,
-  isHoverable: true
-}, {
-  lefticon: MyTrips,
-  text: 'My Trips',
-  ravenActionName: 'mytrips',
-  isHoverable: false,
-  isClickable: true,
-  link: MY_TRIPS_URL
-}, {
-  lefticon: SupportIcon,
-  text: 'Support',
-  ravenActionName: 'support',
-  isHoverable: false,
-  isClickable: true,
-  link: SUPPORT_URL
-}];
+var NAVBAR_OPTIONS = [
+    {
+        lefticon: Offers,
+        text: 'Offers',
+        ravenActionName: 'offers',
+        isHoverable: false,
+        isClickable: true,
+        link: OFFERS_URL,
+    },
+    {
+        lefticon: BusinessBag,
+        text: 'Business',
+        ravenActionName: 'business',
+        rightIcon: ChevronDown,
+        isHoverable: true,
+    },
+    {
+        lefticon: MyTrips,
+        text: 'My Trips',
+        ravenActionName: 'mytrips',
+        isHoverable: false,
+        isClickable: true,
+        link: MY_TRIPS_URL,
+    },
+    {
+        lefticon: SupportIcon,
+        text: 'Support',
+        ravenActionName: 'support',
+        isHoverable: false,
+        isClickable: true,
+        link: SUPPORT_URL,
+    },
+];
 var LOBS = {
-  FLIGHTS: 'Flights',
-  HOTELS: 'Hotels',
-  TRAIN: 'Trains',
-  PACKAGES: 'Packages',
-  BUSES: 'Buses'
+    FLIGHTS: 'Flights',
+    HOTELS: 'Hotels',
+    TRAIN: 'Trains',
+    PACKAGES: 'Packages',
+    BUSES: 'Buses',
 };
-var LOB_DATA = [{
-  title: LOBS.FLIGHTS,
-  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_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_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Buses.png?cache=true',
-  link: '/bus'
-}, {
-  title: LOBS.PACKAGES,
-  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',
-  link: 'https://agency.cleartrip.com'
-}, {
-  title: 'OutOfOffice',
-  subtitle: 'For startups, corporates and SMEs',
-  details: 'Manage corporate business travel, smartly',
-  link: 'https://ooo.cleartrip.com/',
-  ravenActionName: 'ooo'
-}, {
-  title: 'MICE',
-  subtitle: 'For corporate events',
-  details: 'An end-to-end management solution for all your corporate events',
-  link: 'https://business.cleartrip.com/'
-}, {
-  title: 'API',
-  subtitle: 'For developers',
-  details: 'Unlock seamless integration and scale with our powerful, reliable APIs',
-  link: 'https://business.cleartrip.com/api-customers/more-details'
-}];
+var LOB_DATA = [
+    {
+        title: LOBS.FLIGHTS,
+        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_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_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Buses.png?cache=true',
+        link: '/bus',
+    },
+    {
+        title: LOBS.PACKAGES,
+        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',
+        link: 'https://agency.cleartrip.com',
+    },
+    {
+        title: 'OutOfOffice',
+        subtitle: 'For startups, corporates and SMEs',
+        details: 'Manage corporate business travel, smartly',
+        link: 'https://ooo.cleartrip.com/',
+        ravenActionName: 'ooo',
+    },
+    {
+        title: 'MICE',
+        subtitle: 'For corporate events',
+        details: 'An end-to-end management solution for all your corporate events',
+        link: 'https://business.cleartrip.com/',
+    },
+    {
+        title: 'API',
+        subtitle: 'For developers',
+        details: 'Unlock seamless integration and scale with our powerful, reliable APIs',
+        link: 'https://business.cleartrip.com/api-customers/more-details',
+    },
+];
 var BUSINESS_DROPDOWN_HEADING = 'Other business services';
 var RAVEN_PAGE_NAMES;
 (function (RAVEN_PAGE_NAMES) {
-  RAVEN_PAGE_NAMES["UNIFIED_HOME"] = "unified_homepage";
-  RAVEN_PAGE_NAMES["HOTELS_HOME"] = "hotel_home";
-  RAVEN_PAGE_NAMES["FLIGHTS_HOME"] = "flights_home";
+    RAVEN_PAGE_NAMES["UNIFIED_HOME"] = "unified_homepage";
+    RAVEN_PAGE_NAMES["HOTELS_HOME"] = "hotel_home";
+    RAVEN_PAGE_NAMES["FLIGHTS_HOME"] = "flights_home";
 })(RAVEN_PAGE_NAMES || (RAVEN_PAGE_NAMES = {}));
 var RAVEN_PLATFORMS;
 (function (RAVEN_PLATFORMS) {
-  RAVEN_PLATFORMS["DESKTOP"] = "desktop";
+    RAVEN_PLATFORMS["DESKTOP"] = "desktop";
 })(RAVEN_PLATFORMS || (RAVEN_PLATFORMS = {}));
 var LOG_IN_TEXT = 'Log in';
 var THEME_CONFIG = {
-  NOVAC: {
-    headerBackground: 'transparent',
-    hoverColor: '#FDBA12',
-    logoFill: '#FFF',
-    fkcompanyColor: '#FFF',
-    typographyColor: '#FFF',
-    loginButtonColorVariant: ButtonColor.NEUTRAL
-  },
-  DEFAULT: {
-    headerBackground: '#FFFFFF',
-    hoverColor: '#FF4F17',
-    logoFill: '#FF4F17',
-    fkcompanyColor: '#1A1A1A',
-    typographyColor: '#1A1A1A',
-    loginButtonColorVariant: ButtonColor.PRIMARY
-  }
+    NOVAC: {
+        headerBackground: 'transparent',
+        hoverColor: '#FDBA12',
+        logoFill: '#FFF',
+        fkcompanyColor: '#FFF',
+        typographyColor: '#FFF',
+        loginButtonColorVariant: ButtonColor.NEUTRAL,
+    },
+    DEFAULT: {
+        headerBackground: '#FFFFFF',
+        hoverColor: '#FF4F17',
+        logoFill: '#FF4F17',
+        fkcompanyColor: '#1A1A1A',
+        typographyColor: '#1A1A1A',
+        loginButtonColorVariant: ButtonColor.PRIMARY,
+    },
 };
 
 var HeaderContext = createContext(undefined);
 var useHeaderContext = function () {
-  var context = useContext(HeaderContext);
-  if (!context) {
-    throw new Error('useHeaderContext must be used within a HeaderProvider');
-  }
-  return context;
-};
-var HeaderProvider = function (_a) {
-  var value = _a.value,
-    children = _a.children;
-  return jsx(HeaderContext.Provider, __assign({
-    value: value
-  }, {
-    children: children
-  }));
-};
-
-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];
+    var context = useContext(HeaderContext);
+    if (!context) {
+        throw new Error('useHeaderContext must be used within a HeaderProvider');
     }
-  });
-  return payload;
+    return context;
 };
-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.hostname
-  };
-  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 HeaderProvider = function (_a) {
+    var value = _a.value, children = _a.children;
+    return jsx(HeaderContext.Provider, __assign({ value: value }, { children: children }));
 };
 
 var LobsHeader = function () {
-  var _a = useHeaderContext(),
-    selectedLOB = _a.selectedLOB,
-    isUserLoggedIn = _a.isUserLoggedIn,
-    ravenEventName = _a.ravenEventName,
-    ravenPageName = _a.ravenPageName,
-    _b = _a.ravenPayload,
-    ravenPayload = _b === void 0 ? {} : _b,
-    ravenPushCallback = _a.ravenPushCallback;
-  var handleClick = function (title, isSelected) {
-    if (!isSelected) {
-      var payload = {
-        action_name: "".concat(title.toLowerCase(), "_tab_click"),
-        action_type: 'click'
-      };
-      ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
-    }
-  };
-  return jsx(Container, __assign({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '16px',
-    background: '#F7FAFF',
-    top: '64px',
-    zIndex: 2,
-    css: {
-      gap: 24
-    }
-  }, {
-    children: LOB_DATA.map(function (item, index) {
-      var title = item.title,
-        link = item.link,
-        image = item.image;
-      var isSelected = selectedLOB === title;
-      return jsx("a", __assign({
-        href: isSelected ? undefined : link,
-        style: {
-          textDecoration: 'none',
-          pointerEvents: isSelected ? 'none' : 'auto'
-        },
-        onClick: function () {
-          return handleClick(title, isSelected);
-        }
-      }, {
-        children: jsxs(Container, __assign({
-          display: 'flex',
-          alignItems: 'center',
-          width: '116px',
-          height: '48px',
-          justifyContent: 'center',
-          cursor: 'pointer',
-          css: {
-            gap: 8,
-            background: isSelected ? '#FFFFFF' : 'transparent',
-            border: isSelected ? '1px solid #E6E6E6' : '',
-            borderRadius: '40px',
-            padding: '8px 16px 8px 8px',
-            transition: 'background 0.2s ease'
-          }
-        }, {
-          children: [jsx("img", {
-            src: image,
-            alt: title,
-            width: 32,
-            height: 32
-          }), jsx(Typography, __assign({
-            variant: isSelected ? TypographyVariant.HM3 : TypographyVariant.B1,
-            isClickable: true
-          }, {
-            children: title
-          }))]
-        }))
-      }), index);
-    })
-  }));
+    var selectedLOB = useHeaderContext().selectedLOB;
+    return (jsx(Container, __assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px', background: '#F7FAFF', top: '64px', zIndex: 2, css: {
+            gap: 24,
+        } }, { children: LOB_DATA.map(function (item, index) {
+            var title = item.title, link = item.link, image = item.image;
+            var isSelected = selectedLOB === title;
+            return (jsx("a", __assign({ href: isSelected ? undefined : link, style: { textDecoration: 'none', pointerEvents: isSelected ? 'none' : 'auto' } }, { children: jsxs(Container, __assign({ display: 'flex', alignItems: 'center', width: '116px', height: '48px', justifyContent: 'center', cursor: 'pointer', css: {
+                        gap: 8,
+                        background: isSelected ? '#FFFFFF' : 'transparent',
+                        border: isSelected ? '1px solid #E6E6E6' : '',
+                        borderRadius: '40px',
+                        padding: '8px 16px 8px 8px',
+                        transition: 'background 0.2s ease',
+                    } }, { children: [jsx("img", { src: image, alt: title, width: 32, height: 32 }), jsx(Typography, __assign({ variant: isSelected ? TypographyVariant.HM3 : TypographyVariant.B1, isClickable: true }, { children: title }))] }), index) })));
+        }) })));
 };
 
 var useDelayedUnmount = function (show, unmountDelay) {
-  var _a = useState(show),
-    showComponent = _a[0],
-    setShowComponent = _a[1];
-  var timerRef = useRef();
-  useEffect(function () {
-    if (!show) {
-      timerRef.current = setTimeout(function () {
-        setShowComponent(false);
-      }, unmountDelay);
-    } else {
-      setShowComponent(show);
-    }
-    return function () {
-      (timerRef === null || timerRef === void 0 ? void 0 : timerRef.current) && clearTimeout(timerRef.current);
-    };
-  }, [show]);
-  return showComponent;
+    var _a = useState(show), showComponent = _a[0], setShowComponent = _a[1];
+    var timerRef = useRef();
+    useEffect(function () {
+        if (!show) {
+            timerRef.current = setTimeout(function () {
+                setShowComponent(false);
+            }, unmountDelay);
+        }
+        else {
+            setShowComponent(show);
+        }
+        return function () {
+            (timerRef === null || timerRef === void 0 ? void 0 : timerRef.current) && clearTimeout(timerRef.current);
+        };
+    }, [show]);
+    return showComponent;
 };
 var useMountTransition = function (isMounted, unmountDelay) {
-  var _a = useState(false),
-    hasTransitionedIn = _a[0],
-    setHasTransitionedIn = _a[1];
-  var timeoutIdRef = useRef();
-  useEffect(function () {
-    if (isMounted && !hasTransitionedIn) {
-      setTimeout(function () {
-        setHasTransitionedIn(true);
-      }, 0);
-    } else if (!isMounted && hasTransitionedIn) {
-      timeoutIdRef.current = setTimeout(function () {
-        return setHasTransitionedIn(false);
-      }, unmountDelay);
-    }
-    return function () {
-      if (timeoutIdRef && timeoutIdRef.current) {
-        clearTimeout(timeoutIdRef.current);
-      }
-    };
-  }, [unmountDelay, isMounted]);
-  return hasTransitionedIn;
+    var _a = useState(false), hasTransitionedIn = _a[0], setHasTransitionedIn = _a[1];
+    var timeoutIdRef = useRef();
+    useEffect(function () {
+        if (isMounted && !hasTransitionedIn) {
+            setTimeout(function () {
+                setHasTransitionedIn(true);
+            }, 0);
+        }
+        else if (!isMounted && hasTransitionedIn) {
+            timeoutIdRef.current = setTimeout(function () { return setHasTransitionedIn(false); }, unmountDelay);
+        }
+        return function () {
+            if (timeoutIdRef && timeoutIdRef.current) {
+                clearTimeout(timeoutIdRef.current);
+            }
+        };
+    }, [unmountDelay, isMounted]);
+    return hasTransitionedIn;
 };
 
 function HeaderAnimatedMask(_a) {
-  var children = _a.children,
-    onMaskClick = _a.onMaskClick,
-    show = _a.show,
-    marginTop = _a.marginTop,
-    handleDropdownMouseEnter = _a.handleDropdownMouseEnter,
-    handleDropdownMouseLeave = _a.handleDropdownMouseLeave;
-  useEffect(function () {
-    if (show) {
-      document.body.style.overflow = 'hidden';
-    }
-    return function () {
-      document.body.style.overflow = 'initial';
-    };
-  }, [show]);
-  var showFlagProxy = useDelayedUnmount(show, 300);
-  var triggerTransition = useMountTransition(show, 100);
-  var triggerOpenTransition = triggerTransition;
-  return jsxs(Fragment, {
-    children: [showFlagProxy && jsx(Container, {
-      id: 'mask-container',
-      css: {
-        position: 'fixed',
-        backgroundColor: '#000',
-        opacity: triggerOpenTransition ? 0.4 : 0,
-        width: '100%',
-        height: '100vh',
-        left: 0,
-        top: marginTop || 0,
-        zIndex: 9,
-        transition: 'opacity 300ms ease-in'
-      },
-      onClick: onMaskClick
-    }), showFlagProxy && jsx(Container, __assign({
-      onMouseEnter: handleDropdownMouseEnter,
-      onMouseLeave: handleDropdownMouseLeave
-    }, {
-      children: children
-    }))]
-  });
+    var children = _a.children, onMaskClick = _a.onMaskClick, show = _a.show, marginTop = _a.marginTop, handleDropdownMouseEnter = _a.handleDropdownMouseEnter, handleDropdownMouseLeave = _a.handleDropdownMouseLeave;
+    useEffect(function () {
+        if (show) {
+            document.body.style.overflow = 'hidden';
+        }
+        return function () {
+            document.body.style.overflow = 'initial';
+        };
+    }, [show]);
+    var showFlagProxy = useDelayedUnmount(show, 300);
+    var triggerTransition = useMountTransition(show, 100);
+    var triggerOpenTransition = triggerTransition;
+    return (jsxs(Fragment, { children: [showFlagProxy && (jsx(Container, { id: 'mask-container', css: {
+                    position: 'fixed',
+                    backgroundColor: '#000',
+                    opacity: triggerOpenTransition ? 0.4 : 0,
+                    width: '100%',
+                    height: '100vh',
+                    left: 0,
+                    top: marginTop || 0,
+                    zIndex: 9,
+                    transition: 'opacity 300ms ease-in',
+                }, onClick: onMaskClick })), showFlagProxy && (jsx(Container, __assign({ onMouseEnter: handleDropdownMouseEnter, onMouseLeave: handleDropdownMouseLeave }, { children: children })))] }));
 }
 
 var MIN_CLOSE_DELAY = 150;
 var useHoverDropdown = function (_a) {
-  var _b = _a === void 0 ? {} : _a,
-    _c = _b.closeDelay,
-    closeDelayArg = _c === void 0 ? 0 : _c,
-    _d = _b.openDelay,
-    openDelay = _d === void 0 ? 500 : _d;
-  var closeDelay = Math.max(closeDelayArg, MIN_CLOSE_DELAY);
-  var _e = useState(false),
-    isDropdownVisible = _e[0],
-    setIsDropdownVisible = _e[1];
-  var _f = useState(null),
-    hoveredElemIndex = _f[0],
-    setHoveredElemIndex = _f[1];
-  var timeoutRef = useRef(null);
-  var openTimeoutRef = useRef(null);
-  var cancelElementHover = useRef(false);
-  var handleOnMouseEnter = useCallback(function (index) {
-    if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current);
-    cancelElementHover.current = false;
-    openTimeoutRef.current = setTimeout(function () {
-      setIsDropdownVisible(true);
-      if (!cancelElementHover.current) {
-        setHoveredElemIndex(index);
-      }
-    }, openDelay);
-  }, [openDelay]);
-  var handleOnMouseLeave = useCallback(function () {
-    cancelElementHover.current = true;
-    timeoutRef.current = setTimeout(function () {
-      setIsDropdownVisible(false);
-      setHoveredElemIndex(null);
-    }, closeDelay);
-  }, [closeDelay]);
-  var handleDropdownMouseEnter = useCallback(function () {
-    if (timeoutRef.current) clearTimeout(timeoutRef.current);
-  }, []);
-  var handleDropdownMouseLeave = useCallback(function () {
-    cancelElementHover.current = true;
-    (timeoutRef === null || timeoutRef === void 0 ? void 0 : timeoutRef.current) && clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(function () {
-      setIsDropdownVisible(false);
-      setHoveredElemIndex(null);
-    }, closeDelay);
-  }, []);
-  useEffect(function () {
-    var handleMouseLeaveWindow = function (event) {
-      if (event.clientY <= 0) {
-        setIsDropdownVisible(false);
-        setHoveredElemIndex(null);
-      }
-    };
-    window.addEventListener('mouseleave', handleMouseLeaveWindow);
-    return function () {
-      window.removeEventListener('mouseleave', handleMouseLeaveWindow);
+    var _b = _a === void 0 ? {} : _a, _c = _b.closeDelay, closeDelayArg = _c === void 0 ? 0 : _c, _d = _b.openDelay, openDelay = _d === void 0 ? 500 : _d;
+    var closeDelay = Math.max(closeDelayArg, MIN_CLOSE_DELAY);
+    var _e = useState(false), isDropdownVisible = _e[0], setIsDropdownVisible = _e[1];
+    var _f = useState(null), hoveredElemIndex = _f[0], setHoveredElemIndex = _f[1];
+    var timeoutRef = useRef(null);
+    var openTimeoutRef = useRef(null);
+    var cancelElementHover = useRef(false);
+    var handleOnMouseEnter = useCallback(function (index) {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        if (openTimeoutRef.current)
+            clearTimeout(openTimeoutRef.current);
+        cancelElementHover.current = false;
+        openTimeoutRef.current = setTimeout(function () {
+            setIsDropdownVisible(true);
+            if (!cancelElementHover.current) {
+                setHoveredElemIndex(index);
+            }
+        }, openDelay);
+    }, [openDelay]);
+    var handleOnMouseLeave = useCallback(function () {
+        cancelElementHover.current = true;
+        timeoutRef.current = setTimeout(function () {
+            setIsDropdownVisible(false);
+            setHoveredElemIndex(null);
+        }, closeDelay);
+    }, [closeDelay]);
+    var handleDropdownMouseEnter = useCallback(function () {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+    }, []);
+    var handleDropdownMouseLeave = useCallback(function () {
+        cancelElementHover.current = true;
+        (timeoutRef === null || timeoutRef === void 0 ? void 0 : timeoutRef.current) && clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(function () {
+            setIsDropdownVisible(false);
+            setHoveredElemIndex(null);
+        }, closeDelay);
+    }, []);
+    useEffect(function () {
+        var handleMouseLeaveWindow = function (event) {
+            if (event.clientY <= 0) {
+                setIsDropdownVisible(false);
+                setHoveredElemIndex(null);
+            }
+        };
+        window.addEventListener('mouseleave', handleMouseLeaveWindow);
+        return function () {
+            window.removeEventListener('mouseleave', handleMouseLeaveWindow);
+        };
+    }, []);
+    return {
+        isDropdownVisible: isDropdownVisible,
+        hoveredElemIndex: hoveredElemIndex,
+        handleOnMouseEnter: handleOnMouseEnter,
+        handleOnMouseLeave: handleOnMouseLeave,
+        handleDropdownMouseEnter: handleDropdownMouseEnter,
+        handleDropdownMouseLeave: handleDropdownMouseLeave,
     };
-  }, []);
-  return {
-    isDropdownVisible: isDropdownVisible,
-    hoveredElemIndex: hoveredElemIndex,
-    handleOnMouseEnter: handleOnMouseEnter,
-    handleOnMouseLeave: handleOnMouseLeave,
-    handleDropdownMouseEnter: handleDropdownMouseEnter,
-    handleDropdownMouseLeave: handleDropdownMouseLeave
-  };
 };
 
 var useDropdownAnimation = function (isOpen) {
-  var containerRef = useRef(null);
-  var openDropdown = function () {
-    if (containerRef.current) {
-      var fullHeight_1 = containerRef.current.scrollHeight;
-      containerRef.current.style.maxHeight = "".concat(fullHeight_1 / 2, "px");
-      containerRef.current.style.opacity = '0';
-      requestAnimationFrame(function () {
+    var containerRef = useRef(null);
+    var openDropdown = function () {
         if (containerRef.current) {
-          containerRef.current.style.transition = 'max-height 0.3s ease-in-out, opacity 0.3s ease-in-out';
-          containerRef.current.style.maxHeight = "".concat(fullHeight_1, "px");
-          containerRef.current.style.opacity = '1';
+            var fullHeight_1 = containerRef.current.scrollHeight;
+            containerRef.current.style.maxHeight = "".concat(fullHeight_1 / 2, "px");
+            containerRef.current.style.opacity = '0';
+            requestAnimationFrame(function () {
+                if (containerRef.current) {
+                    containerRef.current.style.transition = 'max-height 0.3s ease-in-out, opacity 0.3s ease-in-out';
+                    containerRef.current.style.maxHeight = "".concat(fullHeight_1, "px");
+                    containerRef.current.style.opacity = '1';
+                }
+            });
         }
-      });
-    }
-  };
-  var closeDropdown = function () {
-    if (containerRef.current) {
-      var fullHeight = containerRef.current.scrollHeight;
-      containerRef.current.style.transition = 'max-height 0.3s ease-in-out, opacity 0.3s ease-in-out';
-      containerRef.current.style.maxHeight = "".concat(fullHeight / 2, "px");
-      containerRef.current.style.opacity = '0';
-      setTimeout(function () {
+    };
+    var closeDropdown = function () {
         if (containerRef.current) {
-          containerRef.current.style.maxHeight = '0px';
+            var fullHeight = containerRef.current.scrollHeight;
+            containerRef.current.style.transition = 'max-height 0.3s ease-in-out, opacity 0.3s ease-in-out';
+            containerRef.current.style.maxHeight = "".concat(fullHeight / 2, "px");
+            containerRef.current.style.opacity = '0';
+            setTimeout(function () {
+                if (containerRef.current) {
+                    containerRef.current.style.maxHeight = '0px';
+                }
+            }, 300);
+        }
+    };
+    useEffect(function () {
+        if (isOpen) {
+            openDropdown();
+        }
+        else {
+            closeDropdown();
+        }
+    }, [isOpen]);
+    return { containerRef: containerRef };
+};
+
+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);
         }
-      }, 300);
     }
-  };
-  useEffect(function () {
-    if (isOpen) {
-      openDropdown();
-    } else {
-      closeDropdown();
+    catch (err) {
+        console.error(err);
+        return;
     }
-  }, [isOpen]);
-  return {
-    containerRef: containerRef
-  };
 };
 
 var accountOptionHoverStyles = {
-  transition: 'background-color 0.2s ease-in-out',
-  '&:hover': {
-    backgroundColor: '#ECF3FF'
-  }
+    transition: 'background-color 0.2s ease-in-out',
+    '&:hover': {
+        backgroundColor: '#ECF3FF',
+    },
 };
 var logoutButtonHoverStyles = {
-  transition: 'background-color 0.2s ease-in-out',
-  '&:hover': {
-    backgroundColor: '#FBEFEF'
-  }
+    transition: 'background-color 0.2s ease-in-out',
+    '&:hover': {
+        backgroundColor: '#FBEFEF',
+    },
 };
 var moveRight = keyframes(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  from {\n    transform: translateX(-20px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"], ["\n  from {\n    transform: translateX(-20px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"])));
 var moveRightAgain = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from {\n    transform: translateX(-20.01px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"], ["\n  from {\n    transform: translateX(-20.01px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"])));
 var arrowContainerStyles = {
-  display: 'flex',
-  backgroundColor: 'black',
-  transition: 'background-color 200ms ease',
-  'flex-direction': 'row',
-  justifyContent: 'center',
-  width: '20px',
-  height: '20px',
-  overflow: 'hidden',
-  borderRadius: '50%'
+    display: 'flex',
+    backgroundColor: 'black',
+    transition: 'background-color 200ms ease',
+    'flex-direction': 'row',
+    justifyContent: 'center',
+    width: '20px',
+    height: '20px',
+    overflow: 'hidden',
+    borderRadius: '50%',
 };
 var getLoginButtonBgColorStyles = function (saleThemeEnabled) {
-  if (saleThemeEnabled) {
-    return {
-      backgroundColor: 'transparent !important',
-      '&:hover': {
-        backgroundColor: 'rgba(255, 255, 255, 0.25)!important'
-      }
-    };
-  } else {
-    return {
-      backgroundColor: 'transparent !important',
-      '&:hover': {
-        backgroundColor: '#F3F3F3 !important'
-      }
-    };
-  }
+    if (saleThemeEnabled) {
+        return {
+            backgroundColor: 'transparent !important',
+            '&:hover': {
+                backgroundColor: 'rgba(255, 255, 255, 0.25)!important',
+            },
+        };
+    }
+    else {
+        return {
+            backgroundColor: 'transparent !important',
+            '&:hover': {
+                backgroundColor: '#F3F3F3 !important',
+            },
+        };
+    }
 };
 var templateObject_1$1, templateObject_2;
 
 var AnimatedArrow = function () {
-  return jsx(Container, __assign({
-    className: 'bd-arrow-container-js',
-    css: arrowContainerStyles
-  }, {
-    children: __spreadArray([], Array(3), true).map(function (_, index) {
-      return jsx(Container, __assign({
-        className: 'bd-arrow-wrapper-js',
-        display: 'flex',
-        alignItems: 'center'
-      }, {
-        children: jsx(ArrowRight, {})
-      }), index);
-    })
-  }));
+    return (jsx(Container, __assign({ className: 'bd-arrow-container-js', css: arrowContainerStyles }, { children: __spreadArray([], Array(3), true).map(function (_, index) { return (jsx(Container, __assign({ className: 'bd-arrow-wrapper-js', display: 'flex', alignItems: 'center' }, { children: jsx(ArrowRight, {}) }), index)); }) })));
 };
-var BDHoverContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "BusinessDropdown__BDHoverContainer",
-  componentId: "sc-1tsshe4-0"
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: pointer;\n  width: 200px;\n  &:hover {\n    .bd-arrow-container-js {\n      background-color: rgba(255, 79, 23, 1);\n      transition: color 200ms ease;\n    }\n    .bd-arrow-wrapper-js {\n      animation: ", " 200ms linear;\n      display: flex;\n    }\n    .color-orange-on-hover-js {\n      color: rgba(255, 79, 23, 1);\n      transition: background-color 200ms ease;\n    }\n  }\n  &:not(:hover) .bd-arrow-wrapper-js {\n    animation: ", " 200ms linear backwards;\n  }\n"], ["\n  cursor: pointer;\n  width: 200px;\n  &:hover {\n    .bd-arrow-container-js {\n      background-color: rgba(255, 79, 23, 1);\n      transition: color 200ms ease;\n    }\n    .bd-arrow-wrapper-js {\n      animation: ", " 200ms linear;\n      display: flex;\n    }\n    .color-orange-on-hover-js {\n      color: rgba(255, 79, 23, 1);\n      transition: background-color 200ms ease;\n    }\n  }\n  &:not(:hover) .bd-arrow-wrapper-js {\n    animation: ", " 200ms linear backwards;\n  }\n"])), moveRight, moveRightAgain);
+var BDHoverContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: pointer;\n  width: 200px;\n  &:hover {\n    .bd-arrow-container-js {\n      background-color: rgba(255, 79, 23, 1);\n      transition: color 200ms ease;\n    }\n    .bd-arrow-wrapper-js {\n      animation: ", " 200ms linear;\n      display: flex;\n    }\n    .color-orange-on-hover-js {\n      color: rgba(255, 79, 23, 1);\n      transition: background-color 200ms ease;\n    }\n  }\n  &:not(:hover) .bd-arrow-wrapper-js {\n    animation: ", " 200ms linear backwards;\n  }\n"], ["\n  cursor: pointer;\n  width: 200px;\n  &:hover {\n    .bd-arrow-container-js {\n      background-color: rgba(255, 79, 23, 1);\n      transition: color 200ms ease;\n    }\n    .bd-arrow-wrapper-js {\n      animation: ", " 200ms linear;\n      display: flex;\n    }\n    .color-orange-on-hover-js {\n      color: rgba(255, 79, 23, 1);\n      transition: background-color 200ms ease;\n    }\n  }\n  &:not(:hover) .bd-arrow-wrapper-js {\n    animation: ", " 200ms linear backwards;\n  }\n"])), moveRight, moveRightAgain);
 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 = useState(0),
-    leftPosition = _d[0],
-    setLeftPosition = _d[1];
-  var containerRef = useDropdownAnimation(isOpen).containerRef;
-  useEffect(function () {
-    var updatePosition = function () {
-      if (containerRef.current) {
-        var screenWidth = window.innerWidth;
-        var containerWidth = containerRef.current.offsetWidth || 0;
-        var newLeft = (screenWidth - containerWidth) / 2;
-        if (newLeft !== leftPosition) {
-          setLeftPosition(newLeft);
-        }
-      }
-    };
-    updatePosition();
-    window.addEventListener('resize', updatePosition);
-    return function () {
-      return window.removeEventListener('resize', updatePosition);
-    };
-  }, [containerRef, leftPosition]);
-  var handleBusinessDropdownClick = 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 jsxs(Container, __assign({
-    ref: containerRef,
-    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: {
-      overflow: 'hidden',
-      opacity: 0
-    }
-  }, {
-    children: [jsx(Container, __assign({
-      padding: '20px 24px 20px 24px',
-      backgroundColor: '#FFF1EC'
-    }, {
-      children: jsx(Typography, __assign({
-        variant: 'HM2'
-      }, {
-        children: BUSINESS_DROPDOWN_HEADING
-      }))
-    })), jsx(Container, __assign({
-      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;
-        return jsxs(BDHoverContainer, __assign({
-          className: 'bd-hover-container-js',
-          onClick: function () {
-            return handleBusinessDropdownClick(link, title, ravenActionName);
-          }
-        }, {
-          children: [jsxs(Container, __assign({
-            display: 'flex',
-            flexDirection: 'column',
-            rowGap: '4px'
-          }, {
-            children: [jsxs(Container, __assign({
-              display: 'flex',
-              flexDirection: 'row',
-              alignItems: 'center',
-              columnGap: '8px'
-            }, {
-              children: [jsx(Typography, __assign({
-                variant: 'HM2',
-                className: 'color-orange-on-hover-js',
-                css: {
-                  transition: 'color 200ms ease'
+    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 = useState(0), leftPosition = _d[0], setLeftPosition = _d[1];
+    var containerRef = useDropdownAnimation(isOpen).containerRef;
+    useEffect(function () {
+        var updatePosition = function () {
+            if (containerRef.current) {
+                var screenWidth = window.innerWidth;
+                var containerWidth = containerRef.current.offsetWidth || 0;
+                var newLeft = (screenWidth - containerWidth) / 2;
+                if (newLeft !== leftPosition) {
+                    setLeftPosition(newLeft);
                 }
-              }, {
-                children: title
-              })), jsx(AnimatedArrow, {})]
-            })), jsx(Typography, __assign({
-              variant: 'B3',
-              css: {
-                marginTop: '4px',
-                opacity: 0.75
-              }
-            }, {
-              children: subtitle
-            }))]
-          })), jsx(Typography, __assign({
-            variant: 'P3',
-            color: 'subheading',
-            css: {
-              marginTop: '12px'
             }
-          }, {
-            children: details
-          }))]
-        }), title);
-      })
-    }))]
-  }));
+        };
+        updatePosition();
+        window.addEventListener('resize', updatePosition);
+        return function () { return window.removeEventListener('resize', updatePosition); };
+    }, [containerRef, leftPosition]);
+    var handleBusinessDropdownClick = 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 (jsxs(Container, __assign({ ref: containerRef, 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: {
+            overflow: 'hidden',
+            opacity: 0,
+        } }, { children: [jsx(Container, __assign({ padding: '20px 24px 20px 24px', backgroundColor: '#FFF1EC' }, { children: jsx(Typography, __assign({ variant: 'HM2' }, { children: BUSINESS_DROPDOWN_HEADING })) })), jsx(Container, __assign({ 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;
+                    return (jsxs(BDHoverContainer, __assign({ className: 'bd-hover-container-js', onClick: function () { return handleBusinessDropdownClick(link, title, ravenActionName); } }, { children: [jsxs(Container, __assign({ display: 'flex', flexDirection: 'column', rowGap: '4px' }, { children: [jsxs(Container, __assign({ display: 'flex', flexDirection: 'row', alignItems: 'center', columnGap: '8px' }, { children: [jsx(Typography, __assign({ variant: 'HM2', className: 'color-orange-on-hover-js', css: { transition: 'color 200ms ease' } }, { children: title })), jsx(AnimatedArrow, {})] })), jsx(Typography, __assign({ variant: 'B3', css: { marginTop: '4px', opacity: 0.75 } }, { children: subtitle }))] })), jsx(Typography, __assign({ variant: 'P3', color: 'subheading', css: { marginTop: '12px' } }, { children: details }))] }), title));
+                }) }))] })));
 };
 var templateObject_1;
 
-var ACCOUNT_OPTIONS_POPUP_CONFIG = [{
-  text: 'My Profile',
-  icon: jsx(MyAccount, {
-    width: 24,
-    height: 24
-  }),
-  redirectionLink: '/accounts/profile'
-}, {
-  text: 'My Trips',
-  icon: jsx(MyTrips, {
-    width: 24,
-    height: 24
-  }),
-  redirectionLink: '/accounts/trips'
-}, {
-  text: 'Saved Cards',
-  icon: jsx(SavedCard, {}),
-  redirectionLink: '/accounts/expressway'
-}, {
-  text: 'Saved Travellers',
-  icon: jsx(Travellers, {
-    width: 24,
-    height: 24
-  }),
-  redirectionLink: '/account/travellers'
-}, {
-  text: 'Hi-Five',
-  icon: jsx(HiFive, {}),
-  redirectionLink: '/accounts/hi-five?src=fh'
-}, {
-  text: 'Wallet',
-  icon: jsx(Wallet, {
-    width: 24,
-    height: 24
-  }),
-  redirectionLink: '/accounts/wallet'
-}, {
-  text: 'Settings',
-  icon: jsx(SettingsCog, {
-    width: 24,
-    height: 24
-  }),
-  redirectionLink: '/account/settings'
-}, {
-  text: 'Privacy Rights',
-  icon: jsx(PrivacyRights, {}),
-  redirectionLink: 'accounts/personal-data-dashboard'
-}];
+var ACCOUNT_OPTIONS_POPUP_CONFIG = [
+    {
+        text: 'My Profile',
+        icon: jsx(MyAccount, { width: 24, height: 24 }),
+        redirectionLink: '/accounts/profile',
+    },
+    {
+        text: 'My Trips',
+        icon: jsx(MyTrips, { width: 24, height: 24 }),
+        redirectionLink: '/accounts/trips',
+    },
+    {
+        text: 'Saved Cards',
+        icon: jsx(SavedCard, {}),
+        redirectionLink: '/accounts/expressway',
+    },
+    {
+        text: 'Saved Travellers',
+        icon: jsx(Travellers, { width: 24, height: 24 }),
+        redirectionLink: '/account/travellers',
+    },
+    {
+        text: 'Hi-Five',
+        icon: jsx(HiFive, {}),
+        redirectionLink: '/accounts/hi-five?src=fh',
+    },
+    {
+        text: 'Wallet',
+        icon: jsx(Wallet, { width: 24, height: 24 }),
+        redirectionLink: '/accounts/wallet',
+    },
+    {
+        text: 'Settings',
+        icon: jsx(SettingsCog, { width: 24, height: 24 }),
+        redirectionLink: '/account/settings',
+    },
+    {
+        text: 'Privacy Rights',
+        icon: jsx(PrivacyRights, {}),
+        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';
@@ -726,816 +545,326 @@ var ACCOUNT_OPTIONS_CONTAINER_ID = 'account-options';
 var ACCOUNT_OPTIONS_CONTAINER_WIDTH = 328;
 
 var LoyaltyChip = function (_a) {
-  var icon = _a.icon,
-    borderGradient = _a.borderGradient,
-    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 = useState(false),
-    isHovered = _d[0],
-    setIsHovered = _d[1];
-  var handleClick = 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 jsxs(Container, __assign({
-    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'
-    },
-    onMouseEnter: function () {
-      return setIsHovered(true);
-    },
-    onMouseLeave: function () {
-      return setIsHovered(false);
-    },
-    onClick: handleClick
-  }, {
-    children: [jsx(Container, {
-      css: {
-        content: '""',
-        position: 'absolute',
-        inset: 0,
-        borderRadius: 'inherit',
-        background: backgroundGradient,
-        zIndex: -2
-      }
-    }), jsx(Container, {
-      css: {
-        content: '""',
-        position: 'absolute',
-        inset: 0,
-        borderRadius: 'inherit',
-        padding: '1px',
-        background: borderGradient,
-        WebkitMask: 'linear-gradient(white, white) content-box, linear-gradient(white, white)',
-        WebkitMaskComposite: 'destination-out',
-        maskComposite: 'exclude',
-        zIndex: -1
-      }
-    }), jsx(Container, __assign({
-      display: 'flex',
-      alignItems: 'center',
-      position: 'relative'
-    }, {
-      children: icon
-    })), jsx(Container, __assign({
-      display: 'flex',
-      alignItems: 'center',
-      css: {
-        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
-      }
-    }, {
-      children: jsx(HeaderChevronRight, {
-        color: chevronFillColor
-      })
-    }))]
-  }));
+    var icon = _a.icon, borderGradient = _a.borderGradient, 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 = useState(false), isHovered = _d[0], setIsHovered = _d[1];
+    var handleClick = 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 (jsxs(Container, __assign({ 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',
+        }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onClick: handleClick }, { children: [jsx(Container, { css: {
+                    content: '""',
+                    position: 'absolute',
+                    inset: 0,
+                    borderRadius: 'inherit',
+                    background: backgroundGradient,
+                    zIndex: -2,
+                } }), jsx(Container, { css: {
+                    content: '""',
+                    position: 'absolute',
+                    inset: 0,
+                    borderRadius: 'inherit',
+                    padding: '1px',
+                    background: borderGradient,
+                    WebkitMask: 'linear-gradient(white, white) content-box, linear-gradient(white, white)',
+                    WebkitMaskComposite: 'destination-out',
+                    maskComposite: 'exclude',
+                    zIndex: -1,
+                } }), jsx(Container, __assign({ display: 'flex', alignItems: 'center', position: 'relative' }, { children: icon })), jsx(Container, __assign({ display: 'flex', alignItems: 'center', css: {
+                    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,
+                } }, { children: jsx(HeaderChevronRight, { color: chevronFillColor }) }))] })));
 };
 
 var LOBS_VALUES;
 (function (LOBS_VALUES) {
-  LOBS_VALUES["FLIGHTS"] = "Flights";
-  LOBS_VALUES["HOTELS"] = "Hotels";
-  LOBS_VALUES["BUSES"] = "Buses";
-  LOBS_VALUES["TRAINS"] = "Trains";
-  LOBS_VALUES["PACKAGES"] = "Packages";
+    LOBS_VALUES["FLIGHTS"] = "Flights";
+    LOBS_VALUES["HOTELS"] = "Hotels";
+    LOBS_VALUES["BUSES"] = "Buses";
+    LOBS_VALUES["TRAINS"] = "Trains";
+    LOBS_VALUES["PACKAGES"] = "Packages";
 })(LOBS_VALUES || (LOBS_VALUES = {}));
 
 var LoyaltyType;
 (function (LoyaltyType) {
-  LoyaltyType["FkVip"] = "FkVip";
-  LoyaltyType["FkPremium"] = "FkPremium";
-  LoyaltyType["InsiderIcon"] = "InsiderIcon";
-  LoyaltyType["InsiderElite"] = "InsiderElite";
-  LoyaltyType["CtLoyalty"] = "CtLoyalty";
+    LoyaltyType["FkVip"] = "FkVip";
+    LoyaltyType["FkPremium"] = "FkPremium";
+    LoyaltyType["InsiderIcon"] = "InsiderIcon";
+    LoyaltyType["InsiderElite"] = "InsiderElite";
+    LoyaltyType["CtLoyalty"] = "CtLoyalty";
 })(LoyaltyType || (LoyaltyType = {}));
 
 var _a;
-var LOYALTY_DATA = (_a = {}, _a[LoyaltyType.FkVip] = {
-  icon: jsx(FkBlackIcon, {}),
-  borderGradient: 'linear-gradient(217.07deg, #0B182A 19.65%, #434E57 54.8%, #595952 89.95%)',
-  backgroundGradient: 'linear-gradient(217.07deg, #0B182A 19.65%, #434E57 54.8%, #595952 89.95%)',
-  chevronFillColor: '#FFF'
-}, _a[LoyaltyType.FkPremium] = {
-  icon: jsx(FkGold, {}),
-  borderGradient: 'linear-gradient(230.68deg, rgba(243, 179, 39, 0) 10.1%, #F3B327 45.74%)',
-  backgroundGradient: '#191717',
-  chevronFillColor: '#FFF'
-}, _a[LoyaltyType.InsiderIcon] = {
-  icon: jsx(InsiderIcon, {}),
-  borderGradient: 'linear-gradient(230.68deg, rgba(208, 175, 101, 0) 10.1%, #D0AF65 45.74%)',
-  backgroundGradient: 'linear-gradient(111deg, #2E3042 0%, #1A1C23 100%)',
-  chevronFillColor: '#FFF'
-}, _a[LoyaltyType.InsiderElite] = {
-  icon: jsx(InsiderElite, {}),
-  borderGradient: 'linear-gradient(230.68deg, rgba(208, 175, 101, 0) 10.1%, #D0AF65 45.74%)',
-  backgroundGradient: 'linear-gradient(111deg, #2E3042 0%, #1A1C23 100%)',
-  chevronFillColor: '#FFF'
-}, _a[LoyaltyType.CtLoyalty] = {
-  icon: jsx(CtLoyalty, {}),
-  borderGradient: 'linear-gradient(230.68deg, rgba(243, 179, 39, 0) 10.1%, #F3B327 45.74%)',
-  backgroundGradient: 'linear-gradient(110.82deg, #FFF9EC 0%, #FEE3A8 100%)',
-  chevronFillColor: '#1A1A1A'
-}, _a);
-
-var ExpandableItem = function (_a) {
-  var icon = _a.icon,
-    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 = useState(false),
-    isHovered = _d[0],
-    setIsHovered = _d[1];
-  var handleDefaultClick = 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, type, loyaltyType, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
-  return jsxs(Container, __assign({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '8px',
-    cursor: 'pointer',
-    css: {
-      height: 32,
-      paddingLeft: 8,
-      paddingRight: isHovered ? 4 : 8,
-      transition: 'padding-right 0.2s ease-in-out',
-      background: isHovered ? '#ffd7ca' : '#ffe6df'
+var LOYALTY_DATA = (_a = {},
+    _a[LoyaltyType.FkVip] = {
+        icon: jsx(FkBlackIcon, {}),
+        borderGradient: 'linear-gradient(217.07deg, #0B182A 19.65%, #434E57 54.8%, #595952 89.95%)',
+        backgroundGradient: 'linear-gradient(217.07deg, #0B182A 19.65%, #434E57 54.8%, #595952 89.95%)',
+        chevronFillColor: '#FFF',
+    },
+    _a[LoyaltyType.FkPremium] = {
+        icon: jsx(FkGold, {}),
+        borderGradient: 'linear-gradient(230.68deg, rgba(243, 179, 39, 0) 10.1%, #F3B327 45.74%)',
+        backgroundGradient: '#191717',
+        chevronFillColor: '#FFF',
+    },
+    _a[LoyaltyType.InsiderIcon] = {
+        icon: jsx(InsiderIcon, {}),
+        borderGradient: 'linear-gradient(230.68deg, rgba(208, 175, 101, 0) 10.1%, #D0AF65 45.74%)',
+        backgroundGradient: 'linear-gradient(111deg, #2E3042 0%, #1A1C23 100%)',
+        chevronFillColor: '#FFF',
     },
-    onMouseEnter: function () {
-      return setIsHovered(true);
+    _a[LoyaltyType.InsiderElite] = {
+        icon: jsx(InsiderElite, {}),
+        borderGradient: 'linear-gradient(230.68deg, rgba(208, 175, 101, 0) 10.1%, #D0AF65 45.74%)',
+        backgroundGradient: 'linear-gradient(111deg, #2E3042 0%, #1A1C23 100%)',
+        chevronFillColor: '#FFF',
     },
-    onMouseLeave: function () {
-      return setIsHovered(false);
+    _a[LoyaltyType.CtLoyalty] = {
+        icon: jsx(CtLoyalty, {}),
+        borderGradient: 'linear-gradient(230.68deg, rgba(243, 179, 39, 0) 10.1%, #F3B327 45.74%)',
+        backgroundGradient: 'linear-gradient(110.82deg, #FFF9EC 0%, #FEE3A8 100%)',
+        chevronFillColor: '#1A1A1A',
     },
-    onClick: handleDefaultClick
-  }, {
-    children: [jsxs(Container, __assign({
-      display: 'flex',
-      alignItems: 'center',
-      css: {
-        gap: '4px'
-      }
-    }, {
-      children: [icon, jsx(Typography, __assign({
-        variant: 'B3',
-        isClickable: true
-      }, {
-        children: value
-      }))]
-    })), jsx(Container, __assign({
-      display: 'flex',
-      alignItems: 'center',
-      css: {
-        overflow: 'hidden',
-        maxWidth: isHovered ? 16 : 0,
-        transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
-        opacity: isHovered ? 1 : 0
-      }
-    }, {
-      children: jsx(HeaderChevronRight, {})
-    }))]
-  }));
+    _a);
+
+var ExpandableItem = function (_a) {
+    var icon = _a.icon, 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 = useState(false), isHovered = _d[0], setIsHovered = _d[1];
+    var handleDefaultClick = 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,
+        type,
+        loyaltyType,
+        isUserLoggedIn,
+        ravenEventName,
+        ravenPayload,
+        ravenPushCallback,
+        ravenPageName,
+    ]);
+    return (jsxs(Container, __assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '8px', cursor: 'pointer', css: {
+            height: 32,
+            paddingLeft: 8,
+            paddingRight: isHovered ? 4 : 8,
+            transition: 'padding-right 0.2s ease-in-out',
+            background: isHovered ? '#ffd7ca' : '#ffe6df',
+        }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onClick: handleDefaultClick }, { children: [jsxs(Container, __assign({ display: 'flex', alignItems: 'center', css: { gap: '4px' } }, { children: [icon, jsx(Typography, __assign({ variant: 'B3', isClickable: true }, { children: value }))] })), jsx(Container, __assign({ display: 'flex', alignItems: 'center', css: {
+                    overflow: 'hidden',
+                    maxWidth: isHovered ? 16 : 0,
+                    transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
+                    opacity: isHovered ? 1 : 0,
+                } }, { children: jsx(HeaderChevronRight, {}) }))] })));
 };
 var RewardsSection = function () {
-  var _a;
-  var _b = useHeaderContext(),
-    selectedLoyaltyType = _b.loyaltyType,
-    _c = _b.fkSupercoinBurnBalance,
-    superCoinBalance = _c === void 0 ? 0 : _c,
-    _d = _b.walletBalance,
-    walletBalance = _d === void 0 ? 0 : _d,
-    loyaltyLoading = _b.loyaltyLoading,
-    superCoinsLoading = _b.superCoinsLoading,
-    walletLoading = _b.walletLoading,
-    walletChipClick = _b.walletChipClick,
-    supercoinsChipClick = _b.supercoinsChipClick,
-    loyaltyChipClick = _b.loyaltyChipClick,
-    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 jsxs(Container, __assign({
-    display: 'flex',
-    padding: '0 16px 16px 16px',
-    justifyContent: 'flex-start',
-    css: {
-      alignSelf: 'stretch',
-      gap: '4px'
+    var _a;
+    var _b = useHeaderContext(), selectedLoyaltyType = _b.loyaltyType, _c = _b.fkSupercoinBurnBalance, superCoinBalance = _c === void 0 ? 0 : _c, _d = _b.walletBalance, walletBalance = _d === void 0 ? 0 : _d, loyaltyLoading = _b.loyaltyLoading, superCoinsLoading = _b.superCoinsLoading, walletLoading = _b.walletLoading, walletChipClick = _b.walletChipClick, supercoinsChipClick = _b.supercoinsChipClick, loyaltyChipClick = _b.loyaltyChipClick, 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;
     }
-  }, {
-    children: [loyaltyLoading ? jsx(Container, {
-      width: '50px',
-      height: '32px',
-      borderRadius: '8px',
-      backgroundColor: '#efefef'
-    }) : selectedLoyaltyType && LOYALTY_DATA[selectedLoyaltyType] && !hideLoyaltyChip && jsx(LoyaltyChip, {
-      icon: LOYALTY_DATA[selectedLoyaltyType].icon,
-      borderGradient: LOYALTY_DATA[selectedLoyaltyType].borderGradient,
-      backgroundGradient: LOYALTY_DATA[selectedLoyaltyType].backgroundGradient,
-      chevronFillColor: ((_a = LOYALTY_DATA[selectedLoyaltyType]) === null || _a === void 0 ? void 0 : _a.chevronFillColor) || '#FFF',
-      handleChipClick: loyaltyChipClick
-    }), superCoinsLoading ? jsx(Container, {
-      width: '50px',
-      height: '32px',
-      borderRadius: '8px',
-      backgroundColor: '#efefef'
-    }) : !hideSupercoinsChip && jsx(ExpandableItem, {
-      icon: jsx(Supercoin, {
-        width: 20,
-        height: 20
-      }),
-      value: superCoinBalance,
-      handleChipClick: supercoinsChipClick,
-      type: 'supercoin'
-    }), walletLoading ? jsx(Container, {
-      width: '50px',
-      height: '32px',
-      borderRadius: '8px',
-      backgroundColor: '#efefef'
-    }) : !hideWalletChip && jsx(ExpandableItem, {
-      icon: jsx(Wallet, {
-        width: 20,
-        height: 20
-      }),
-      value: walletBalance,
-      handleChipClick: walletChipClick,
-      type: 'wallet'
-    })]
-  }));
+    return (jsxs(Container, __assign({ display: 'flex', padding: '0 16px 16px 16px', justifyContent: 'flex-start', css: { alignSelf: 'stretch', gap: '4px' } }, { children: [loyaltyLoading ? (jsx(Container, { width: '50px', height: '32px', borderRadius: '8px', backgroundColor: '#efefef' })) : (selectedLoyaltyType &&
+                LOYALTY_DATA[selectedLoyaltyType] &&
+                !hideLoyaltyChip && (jsx(LoyaltyChip, { icon: LOYALTY_DATA[selectedLoyaltyType].icon, borderGradient: LOYALTY_DATA[selectedLoyaltyType].borderGradient, backgroundGradient: LOYALTY_DATA[selectedLoyaltyType].backgroundGradient, chevronFillColor: ((_a = LOYALTY_DATA[selectedLoyaltyType]) === null || _a === void 0 ? void 0 : _a.chevronFillColor) || '#FFF', handleChipClick: loyaltyChipClick }))), superCoinsLoading ? (jsx(Container, { width: '50px', height: '32px', borderRadius: '8px', backgroundColor: '#efefef' })) : (!hideSupercoinsChip && (jsx(ExpandableItem, { icon: jsx(Supercoin, { width: 20, height: 20 }), value: superCoinBalance, handleChipClick: supercoinsChipClick, type: 'supercoin' }))), walletLoading ? (jsx(Container, { width: '50px', height: '32px', borderRadius: '8px', backgroundColor: '#efefef' })) : (!hideWalletChip && (jsx(ExpandableItem, { icon: jsx(Wallet, { width: 20, height: 20 }), value: walletBalance, handleChipClick: walletChipClick, type: 'wallet' })))] })));
 };
 
 var AccountDropdownContent = function (_a) {
-  var isOpen = _a.isOpen;
-  var _b = useHeaderContext(),
-    handleLogoutClick = _b.handleLogoutClick,
-    userName = _b.userName,
-    userMobileNumber = _b.userMobileNumber,
-    countryCode = _b.countryCode,
-    userDetailsLoading = _b.userDetailsLoading,
-    loyaltyType = _b.loyaltyType,
-    isUserLoggedIn = _b.isUserLoggedIn,
-    ravenEventName = _b.ravenEventName,
-    ravenPageName = _b.ravenPageName,
-    _c = _b.ravenPayload,
-    ravenPayload = _c === void 0 ? {} : _c,
-    ravenPushCallback = _b.ravenPushCallback;
-  var containerRef = useDropdownAnimation(isOpen).containerRef;
-  var _d = useMemo(function () {
-      return {
+    var isOpen = _a.isOpen;
+    var _b = useHeaderContext(), handleLogoutClick = _b.handleLogoutClick, userName = _b.userName, userMobileNumber = _b.userMobileNumber, countryCode = _b.countryCode, userDetailsLoading = _b.userDetailsLoading, loyaltyType = _b.loyaltyType, isUserLoggedIn = _b.isUserLoggedIn, ravenEventName = _b.ravenEventName, ravenPageName = _b.ravenPageName, _c = _b.ravenPayload, ravenPayload = _c === void 0 ? {} : _c, ravenPushCallback = _b.ravenPushCallback;
+    var containerRef = useDropdownAnimation(isOpen).containerRef;
+    var _d = useMemo(function () { return ({
         userGreeting: userName ? "Hello ".concat(userName, "!") : '',
-        phoneNumber: countryCode && userMobileNumber ? "".concat(countryCode, " ").concat(userMobileNumber) : ''
-      };
-    }, [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)
-    };
-  };
-  var handleAccountOptionsClick = useCallback(function (text, redirectLink) {
-    ravenSDKTrigger(isUserLoggedIn, ravenEventName, generateRavenPayload(text), ravenPayload, ravenPushCallback, ravenPageName);
-    window.location.href = redirectLink;
-  }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
-  useCallback(function () {
-    ravenSDKTrigger(isUserLoggedIn, ravenEventName, generateRavenPayload(SIGN_OUT_TEXT), ravenPayload, ravenPushCallback, ravenPageName);
-    handleLogoutClick();
-  }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, handleLogoutClick]);
-  var positionAccountOptionsDiv = useCallback(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");
-    }
-  }, []);
-  useEffect(function () {
-    positionAccountOptionsDiv();
-  }, [positionAccountOptionsDiv]);
-  var renderUserData = function () {
-    var renderContent = function (loading, content, variant, color) {
-      return jsx(Typography, __assign({
-        variant: variant,
-        color: color
-      }, {
-        children: loading ? jsx(Container, {
-          height: variant === 'HM3' ? '18px' : '12px',
-          width: variant === 'HM3' ? '140px' : '200px',
-          backgroundColor: '#efefef',
-          borderRadius: '8px'
-        }) : content
-      }));
+        phoneNumber: countryCode && userMobileNumber ? "".concat(countryCode, " ").concat(userMobileNumber) : '',
+    }); }, [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),
+        });
     };
-    return jsx(Container, __assign({
-      display: 'flex',
-      flexDirection: 'column',
-      css: {
-        gap: '4px'
-      }
-    }, {
-      children: userGreeting ? jsxs(Fragment, {
-        children: [renderContent(userDetailsLoading, userGreeting, 'HM3', 'primary'), renderContent(userDetailsLoading, "".concat(LOGGEDIN_USER_TEXT, " ").concat(phoneNumber), 'P3', 'subheading')]
-      }) : jsxs(Fragment, {
-        children: [renderContent(userDetailsLoading, LOGGEDIN_USER_TEXT, 'P3', 'subheading'), renderContent(userDetailsLoading, phoneNumber, 'HM3', 'primary')]
-      })
-    }));
-  };
-  return jsxs(Container, __assign({
-    id: ACCOUNT_OPTIONS_CONTAINER_ID,
-    ref: containerRef,
-    display: 'flex',
-    flexDirection: 'column',
-    borderRadius: '16px',
-    zIndex: 1002,
-    top: '76px',
-    position: 'fixed',
-    css: {
-      opacity: 0,
-      overflow: 'hidden'
-    },
-    width: "".concat(ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px"),
-    background: '#FFF1EC'
-  }, {
-    children: [jsx(Container, __assign({
-      padding: '16px',
-      height: '76px'
-    }, {
-      children: renderUserData()
-    })), jsx(RewardsSection, {}), jsxs(Container, __assign({
-      display: 'flex',
-      flexDirection: 'column',
-      padding: '8px',
-      backgroundColor: 'white',
-      rowGap: '8px',
-      css: {
-        borderBottomLeftRadius: 12,
-        borderBottomRightRadius: 12
-      }
-    }, {
-      children: [ACCOUNT_OPTIONS_POPUP_CONFIG.map(function (_a) {
-        var text = _a.text,
-          icon = _a.icon,
-          redirectionLink = _a.redirectionLink;
-        return jsx(Container, __assign({
-          padding: '8px',
-          borderRadius: '8px',
-          cursor: 'pointer',
-          onClick: function () {
-            return handleAccountOptionsClick(text, redirectionLink);
-          },
-          css: accountOptionHoverStyles
-        }, {
-          children: jsxs(Container, __assign({
-            display: 'flex',
-            cursor: 'pointer',
-            css: {
-              columnGap: '8px'
-            }
-          }, {
-            children: [icon, jsx(Typography, __assign({
-              variant: 'P1',
-              css: {
-                display: 'flex',
-                alignItems: 'center',
-                cursor: 'pointer'
-              }
-            }, {
-              children: text
-            }))]
-          }))
-        }), "account-option-".concat(text));
-      }), jsx(Divider, {
-        css: {
-          borderBottom: '1px dashed #E6E6E6'
+    var handleAccountOptionsClick = useCallback(function (text, redirectLink) {
+        ravenSDKTrigger(isUserLoggedIn, ravenEventName, generateRavenPayload(text), ravenPayload, ravenPushCallback, ravenPageName);
+        window.location.href = redirectLink;
+    }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
+    useCallback(function () {
+        ravenSDKTrigger(isUserLoggedIn, ravenEventName, generateRavenPayload(SIGN_OUT_TEXT), ravenPayload, ravenPushCallback, ravenPageName);
+        handleLogoutClick();
+    }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, handleLogoutClick]);
+    var positionAccountOptionsDiv = useCallback(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");
         }
-      }), jsxs(Container, __assign({
-        display: 'flex',
-        padding: '8px',
-        borderRadius: '8px',
-        cursor: 'pointer',
-        columnGap: '8px',
-        onClick: handleLogoutClick,
-        css: logoutButtonHoverStyles
-      }, {
-        children: [jsx(Signout, {
-          height: 24,
-          width: 24
-        }), jsx(Typography, __assign({
-          variant: 'P1',
-          css: {
-            display: 'flex',
-            alignItems: 'center',
-            cursor: 'pointer'
-          },
-          color: 'warning'
-        }, {
-          children: SIGN_OUT_TEXT
-        }))]
-      }))]
-    }))]
-  }));
+    }, []);
+    useEffect(function () {
+        positionAccountOptionsDiv();
+    }, [positionAccountOptionsDiv]);
+    var renderUserData = function () {
+        var renderContent = function (loading, content, variant, color) { return (jsx(Typography, __assign({ variant: variant, color: color }, { children: loading ? (jsx(Container, { height: variant === 'HM3' ? '18px' : '12px', width: variant === 'HM3' ? '140px' : '200px', backgroundColor: '#efefef', borderRadius: '8px' })) : (content) }))); };
+        return (jsx(Container, __assign({ display: 'flex', flexDirection: 'column', css: { gap: '4px' } }, { children: userGreeting ? (jsxs(Fragment, { children: [renderContent(userDetailsLoading, userGreeting, 'HM3', 'primary'), renderContent(userDetailsLoading, "".concat(LOGGEDIN_USER_TEXT, " ").concat(phoneNumber), 'P3', 'subheading')] })) : (jsxs(Fragment, { children: [renderContent(userDetailsLoading, LOGGEDIN_USER_TEXT, 'P3', 'subheading'), renderContent(userDetailsLoading, phoneNumber, 'HM3', 'primary')] })) })));
+    };
+    return (jsxs(Container, __assign({ id: ACCOUNT_OPTIONS_CONTAINER_ID, ref: containerRef, display: 'flex', flexDirection: 'column', borderRadius: '16px', zIndex: 1002, top: '76px', position: 'fixed', css: { opacity: 0, overflow: 'hidden' }, width: "".concat(ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px"), background: '#FFF1EC' }, { children: [jsx(Container, __assign({ padding: '16px', height: '76px' }, { children: renderUserData() })), jsx(RewardsSection, {}), jsxs(Container, __assign({ display: 'flex', flexDirection: 'column', padding: '8px', backgroundColor: 'white', rowGap: '8px', css: {
+                    borderBottomLeftRadius: 12,
+                    borderBottomRightRadius: 12,
+                } }, { children: [ACCOUNT_OPTIONS_POPUP_CONFIG.map(function (_a) {
+                        var text = _a.text, icon = _a.icon, redirectionLink = _a.redirectionLink;
+                        return (jsx(Container, __assign({ padding: '8px', borderRadius: '8px', cursor: 'pointer', onClick: function () { return handleAccountOptionsClick(text, redirectionLink); }, css: accountOptionHoverStyles }, { children: jsxs(Container, __assign({ display: 'flex', cursor: 'pointer', css: { columnGap: '8px' } }, { children: [icon, jsx(Typography, __assign({ variant: 'P1', css: { display: 'flex', alignItems: 'center', cursor: 'pointer' } }, { children: text }))] })) }), "account-option-".concat(text)));
+                    }), jsx(Divider, { css: {
+                            borderBottom: '1px dashed #E6E6E6',
+                        } }), jsxs(Container, __assign({ display: 'flex', padding: '8px', borderRadius: '8px', cursor: 'pointer', columnGap: '8px', onClick: handleLogoutClick, css: logoutButtonHoverStyles }, { children: [jsx(Signout, { height: 24, width: 24 }), jsx(Typography, __assign({ variant: 'P1', css: { display: 'flex', alignItems: 'center', cursor: 'pointer' }, color: 'warning' }, { children: SIGN_OUT_TEXT }))] }))] }))] })));
 };
 
 var UserAccount = function () {
-  var _a = useHeaderContext(),
-    isNovacThemeEnabled = _a.isNovacThemeEnabled,
-    ravenEventName = _a.ravenEventName,
-    _b = _a.ravenPayload,
-    ravenPayload = _b === void 0 ? {} : _b,
-    ravenPushCallback = _a.ravenPushCallback,
-    isUserLoggedIn = _a.isUserLoggedIn,
-    loyaltyType = _a.loyaltyType,
-    ravenPageName = _a.ravenPageName;
-  var _c = useHoverDropdown({
-      openDelay: 0
-    }),
-    isDropdownVisible = _c.isDropdownVisible,
-    handleOnMouseEnter = _c.handleOnMouseEnter,
-    handleOnMouseLeave = _c.handleOnMouseLeave,
-    handleDropdownMouseEnter = _c.handleDropdownMouseEnter,
-    handleDropdownMouseLeave = _c.handleDropdownMouseLeave;
-  var _d = useState(false),
-    scrolled = _d[0],
-    setScrolled = _d[1];
-  useEffect(function () {
-    var handleScroll = function () {
-      setScrolled(window.scrollY >= 50);
-    };
-    window.addEventListener('scroll', handleScroll);
-    return function () {
-      return window.removeEventListener('scroll', handleScroll);
-    };
-  }, []);
-  var theme = isNovacThemeEnabled && !scrolled ? THEME_CONFIG.NOVAC : THEME_CONFIG.DEFAULT;
-  var hoverColor = theme.hoverColor,
-    typographyColor = theme.typographyColor;
-  var triggerRavenEventOnHover = 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 jsxs(Container, {
-    children: [jsxs(Container, __assign({
-      display: 'flex',
-      padding: '8px 12px',
-      alignItems: 'center',
-      borderRadius: '12px',
-      height: '100%',
-      cursor: 'pointer',
-      css: {
-        columnGap: 8,
-        height: 64
-      },
-      onMouseEnter: function () {
-        handleOnMouseEnter(0);
-        triggerRavenEventOnHover();
-      },
-      onMouseLeave: handleOnMouseLeave,
-      id: HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID
-    }, {
-      children: [jsx(MyAccount, {
-        color: isDropdownVisible ? hoverColor : typographyColor
-      }), jsxs(Container, __assign({
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center'
-      }, {
-        children: [jsx(Typography, __assign({
-          variant: 'B2',
-          css: {
-            cursor: 'pointer'
-          },
-          colorCode: isDropdownVisible ? hoverColor : typographyColor
-        }, {
-          children: MY_ACCOUNT_TEXT
-        })), jsx(ChevronDown, {
-          width: 20,
-          height: 20,
-          fill: isDropdownVisible ? hoverColor : typographyColor
-        })]
-      }))]
-    })), jsx(HeaderAnimatedMask, __assign({
-      show: isDropdownVisible,
-      marginTop: '64px',
-      handleDropdownMouseEnter: handleDropdownMouseEnter,
-      handleDropdownMouseLeave: handleDropdownMouseLeave,
-      onMaskClick: handleDropdownMouseLeave
-    }, {
-      children: jsx(AccountDropdownContent, {
-        isOpen: isDropdownVisible
-      })
-    }))]
-  });
+    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 = _c.isDropdownVisible, handleOnMouseEnter = _c.handleOnMouseEnter, handleOnMouseLeave = _c.handleOnMouseLeave, handleDropdownMouseEnter = _c.handleDropdownMouseEnter, handleDropdownMouseLeave = _c.handleDropdownMouseLeave;
+    var _d = useState(false), scrolled = _d[0], setScrolled = _d[1];
+    useEffect(function () {
+        var handleScroll = function () {
+            setScrolled(window.scrollY >= 50);
+        };
+        window.addEventListener('scroll', handleScroll);
+        return function () { return window.removeEventListener('scroll', handleScroll); };
+    }, []);
+    var theme = isNovacThemeEnabled && !scrolled ? THEME_CONFIG.NOVAC : THEME_CONFIG.DEFAULT;
+    var hoverColor = theme.hoverColor, typographyColor = theme.typographyColor;
+    var triggerRavenEventOnHover = 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 (jsxs(Container, { children: [jsxs(Container, __assign({ display: 'flex', padding: '8px 12px', alignItems: 'center', borderRadius: '12px', height: '100%', cursor: 'pointer', css: { columnGap: 8, height: 64 }, onMouseEnter: function () {
+                    handleOnMouseEnter(0);
+                    triggerRavenEventOnHover();
+                }, onMouseLeave: handleOnMouseLeave, id: HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID }, { children: [jsx(MyAccount, { color: isDropdownVisible ? hoverColor : typographyColor }), jsxs(Container, __assign({ display: 'flex', flexDirection: 'row', alignItems: 'center' }, { children: [jsx(Typography, __assign({ variant: 'B2', css: { cursor: 'pointer' }, colorCode: isDropdownVisible ? hoverColor : typographyColor }, { children: MY_ACCOUNT_TEXT })), jsx(ChevronDown, { width: 20, height: 20, fill: isDropdownVisible ? hoverColor : typographyColor })] }))] })), jsx(HeaderAnimatedMask, __assign({ show: isDropdownVisible, marginTop: '64px', handleDropdownMouseEnter: handleDropdownMouseEnter, handleDropdownMouseLeave: handleDropdownMouseLeave, onMaskClick: handleDropdownMouseLeave }, { children: jsx(AccountDropdownContent, { isOpen: isDropdownVisible }) }))] }));
 };
 
 var Header = function (props) {
-  return jsx(HeaderProvider, __assign({
-    value: props
-  }, {
-    children: jsx(HeaderContent, {})
-  }));
+    return (jsx(HeaderProvider, __assign({ value: props }, { children: jsx(HeaderContent, {}) })));
 };
 var HeaderContent = function () {
-  var _a;
-  var _b = useHeaderContext(),
-    onLoginButtonClick = _b.onLoginButtonClick,
-    _c = _b.showAllLobs,
-    showAllLobs = _c === void 0 ? false : _c,
-    isUserLoggedIn = _b.isUserLoggedIn,
-    loyaltyType = _b.loyaltyType,
-    _d = _b.isNovacThemeEnabled,
-    isNovacThemeEnabled = _d === void 0 ? false : _d,
-    _e = _b.ravenPayload,
-    ravenPayload = _e === void 0 ? {} : _e,
-    ravenPushCallback = _b.ravenPushCallback,
-    ravenPageName = _b.ravenPageName,
-    ravenEventName = _b.ravenEventName;
-  var _f = useState(false),
-    scrolled = _f[0],
-    setScrolled = _f[1];
-  useEffect(function () {
-    var handleScroll = function () {
-      setScrolled(window.scrollY >= 50);
-    };
-    window.addEventListener('scroll', handleScroll);
-    return function () {
-      return window.removeEventListener('scroll', handleScroll);
-    };
-  }, []);
-  var headerTheme = isNovacThemeEnabled && !scrolled ? THEME_CONFIG.NOVAC : THEME_CONFIG.DEFAULT;
-  var headerBackground = headerTheme.headerBackground,
-    logoFill = headerTheme.logoFill,
-    loginButtonColorVariant = headerTheme.loginButtonColorVariant,
-    hoverColor = headerTheme.hoverColor,
-    fkcompanyColor = headerTheme.fkcompanyColor,
-    typographyColor = headerTheme.typographyColor;
-  var _g = 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 = useCallback(function (actionName, actionType) {
-    return {
-      action_name: actionName,
-      action_type: actionType,
-      u_utm_source: utmSource,
-      loyalty_type: ravenLoyaltyTypes(loyaltyType)
-    };
-  }, [utmSource, loyaltyType]);
-  var handleNavbarOptionsClick = 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 = 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 = 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 jsxs(Fragment, {
-    children: [jsx(Container, __assign({
-      display: 'flex',
-      top: 0,
-      position: 'sticky',
-      width: '100%',
-      alignItems: 'center',
-      justifyContent: 'center',
-      zIndex: 1000,
-      height: '64px',
-      background: headerBackground,
-      css: {
-        gap: '24px',
-        flexShrink: 0,
-        borderBottom: headerBackground === 'transparent' ? '' : '1px solid #E6E6E6',
-        transition: 'background-color 0.3s ease-in-out, border-bottom 0.3s ease-in-out'
-      }
-    }, {
-      children: jsxs(Container, __assign({
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        padding: '0 28px',
-        flex: 1,
-        css: {
-          gap: '24px',
-          maxWidth: 1440
+    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 = useState(false), scrolled = _f[0], setScrolled = _f[1];
+    useEffect(function () {
+        var handleScroll = function () {
+            setScrolled(window.scrollY >= 50);
+        };
+        window.addEventListener('scroll', handleScroll);
+        return function () { return window.removeEventListener('scroll', handleScroll); };
+    }, []);
+    var headerTheme = isNovacThemeEnabled && !scrolled ? THEME_CONFIG.NOVAC : THEME_CONFIG.DEFAULT;
+    var headerBackground = headerTheme.headerBackground, logoFill = headerTheme.logoFill, loginButtonColorVariant = headerTheme.loginButtonColorVariant, hoverColor = headerTheme.hoverColor, fkcompanyColor = headerTheme.fkcompanyColor, typographyColor = headerTheme.typographyColor;
+    var _g = 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 = useCallback(function (actionName, actionType) { return ({
+        action_name: actionName,
+        action_type: actionType,
+        u_utm_source: utmSource,
+        loyalty_type: ravenLoyaltyTypes(loyaltyType),
+    }); }, [utmSource, loyaltyType]);
+    var handleNavbarOptionsClick = 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;
         }
-      }, {
-        children: [jsxs(Container, __assign({
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'center',
-          cursor: 'pointer',
-          onClick: handleHomeClick
-        }, {
-          children: [jsx(CTLogo, {
-            fillColor: logoFill
-          }), jsx(Divider, {
-            css: {
-              width: 12,
-              marginLeft: 2,
-              marginRight: 2,
-              transform: 'rotate(90deg)',
-              borderBottom: '1px solid #e0e0e0'
-            }
-          }), jsx(Fkcompany, {
-            color: fkcompanyColor
-          })]
-        })), jsxs(Container, __assign({
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'center',
-          columnGap: '24px'
-        }, {
-          children: [jsx(Container, __assign({
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            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 jsxs(Container, {
-                children: [jsxs(Container, __assign({
-                  onMouseEnter: function () {
-                    handleOnMouseEnter(index);
-                    if (option.isHoverable) {
-                      triggerRavenEventOnHover(option);
-                    }
-                  },
-                  onMouseLeave: handleOnMouseLeave,
-                  display: 'flex',
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  padding: '8px 12px 8px 12px',
-                  cursor: 'pointer',
-                  position: 'relative',
-                  columnGap: 8,
-                  height: '64px',
-                  onClick: function () {
-                    return handleNavbarOptionsClick(option);
-                  }
-                }, {
-                  children: [jsx(LeftIcon, {
-                    color: isHovered ? hoverColor : typographyColor
-                  }), jsxs(Container, __assign({
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'center'
-                  }, {
-                    children: [jsx(Typography, __assign({
-                      variant: 'B2',
-                      colorCode: isHovered ? hoverColor : typographyColor,
-                      isClickable: true
-                    }, {
-                      children: text
-                    })), RightIcon && jsx(RightIcon, {
-                      width: 20,
-                      height: 20,
-                      fill: isHovered ? hoverColor : typographyColor
-                    })]
-                  }))]
-                }), "nav-option-".concat(index)), jsx(HeaderAnimatedMask, __assign({
-                  show: hoveredElemIndex === index && isHoverable && isDropdownVisible,
-                  marginTop: '64px',
-                  handleDropdownMouseEnter: handleDropdownMouseEnter,
-                  handleDropdownMouseLeave: handleDropdownMouseLeave,
-                  onMaskClick: handleDropdownMouseLeave
-                }, {
-                  children: jsx(BusinessDropdownContent, {
-                    isOpen: hoveredElemIndex === index && isHoverable && isDropdownVisible
-                  })
-                }))]
-              });
-            })
-          })), isUserLoggedIn && jsx(Divider, {
-            css: {
-              width: 12,
-              margin: '0 -18px',
-              transform: 'rotate(90deg)',
-              borderBottom: '1px solid #e0e0e0'
-            }
-          }), jsx(Container, {
-            children: isUserLoggedIn ? jsx(Container, __assign({
-              display: 'flex',
-              flexDirection: 'row',
-              alignItems: 'center'
-            }, {
-              children: jsx(UserAccount, {})
-            })) : jsx(Button, __assign({
-              onClick: onLoginButtonClick,
-              css: __assign({
-                width: 153,
-                height: 40
-              }, getLoginButtonBgColorStyles(headerBackground === 'transparent')),
-              loading: false,
-              color: loginButtonColorVariant,
-              variant: ButtonVariant.OUTLINE
-            }, {
-              children: LOG_IN_TEXT
-            }))
-          })]
-        }))]
-      }))
-    })), showAllLobs && jsx(LobsHeader, {})]
-  });
+    }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
+    var handleHomeClick = 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 = 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 (jsxs(Fragment, { children: [jsx(Container, __assign({ display: 'flex', top: 0, position: 'sticky', width: '100%', alignItems: 'center', justifyContent: 'center', zIndex: 1000, height: '64px', background: headerBackground, css: {
+                    gap: '24px',
+                    flexShrink: 0,
+                    borderBottom: headerBackground === 'transparent' ? '' : '1px solid #E6E6E6',
+                    transition: 'background-color 0.3s ease-in-out, border-bottom 0.3s ease-in-out',
+                } }, { children: jsxs(Container, __assign({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 28px', flex: 1, css: {
+                        gap: '24px',
+                        maxWidth: 1440,
+                    } }, { children: [jsxs(Container, __assign({ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', onClick: handleHomeClick }, { children: [jsx(CTLogo, { fillColor: logoFill }), jsx(Divider, { css: {
+                                        width: 12,
+                                        marginLeft: 2,
+                                        marginRight: 2,
+                                        transform: 'rotate(90deg)',
+                                        borderBottom: '1px solid #e0e0e0',
+                                    } }), jsx(Fkcompany, { color: fkcompanyColor })] })), jsxs(Container, __assign({ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', columnGap: '24px' }, { children: [jsx(Container, __assign({ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', 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 (jsxs(Container, { children: [jsxs(Container, __assign({ onMouseEnter: function () {
+                                                        handleOnMouseEnter(index);
+                                                        if (option.isHoverable) {
+                                                            triggerRavenEventOnHover(option);
+                                                        }
+                                                    }, onMouseLeave: handleOnMouseLeave, display: 'flex', flexDirection: 'row', alignItems: 'center', padding: '8px 12px 8px 12px', cursor: 'pointer', position: 'relative', columnGap: 8, height: '64px', onClick: function () { return handleNavbarOptionsClick(option); } }, { children: [jsx(LeftIcon, { color: isHovered ? hoverColor : typographyColor }), jsxs(Container, __assign({ display: 'flex', flexDirection: 'row', alignItems: 'center' }, { children: [jsx(Typography, __assign({ variant: 'B2', colorCode: isHovered ? hoverColor : typographyColor, isClickable: true }, { children: text })), RightIcon && (jsx(RightIcon, { width: 20, height: 20, fill: isHovered ? hoverColor : typographyColor }))] }))] }), "nav-option-".concat(index)), jsx(HeaderAnimatedMask, __assign({ show: hoveredElemIndex === index && isHoverable && isDropdownVisible, marginTop: '64px', handleDropdownMouseEnter: handleDropdownMouseEnter, handleDropdownMouseLeave: handleDropdownMouseLeave, onMaskClick: handleDropdownMouseLeave }, { children: jsx(BusinessDropdownContent, { isOpen: hoveredElemIndex === index && isHoverable && isDropdownVisible }) }))] }));
+                                    }) })), isUserLoggedIn && (jsx(Divider, { css: {
+                                        width: 12,
+                                        margin: '0 -18px',
+                                        transform: 'rotate(90deg)',
+                                        borderBottom: '1px solid #e0e0e0',
+                                    } })), jsx(Container, { children: isUserLoggedIn ? (jsx(Container, __assign({ display: 'flex', flexDirection: 'row', alignItems: 'center' }, { children: jsx(UserAccount, {}) }))) : (jsx(Button, __assign({ onClick: onLoginButtonClick, css: __assign({ width: 153, height: 40 }, getLoginButtonBgColorStyles(headerBackground === 'transparent')), loading: false, color: loginButtonColorVariant, variant: ButtonVariant.OUTLINE }, { children: LOG_IN_TEXT }))) })] }))] })) })), showAllLobs && jsx(LobsHeader, {})] }));
 };
 
 export { Header, LOBS_VALUES, LoyaltyType, RAVEN_PAGE_NAMES };