@cleartrip/ct-design-header 1.3.0 → 1.4.0-SNAPSHOT-multi-date-range-selector.0

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-container'), require('@cleartrip/ct-design-typography'), require('@cleartrip/ct-design-button'), require('@cleartrip/ct-design-divider'), require('@cleartrip/ct-design-icons'), require('styled-components')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-container', '@cleartrip/ct-design-typography', '@cleartrip/ct-design-button', '@cleartrip/ct-design-divider', '@cleartrip/ct-design-icons', 'styled-components'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemHeader = {}, global.jsxRuntime, global.React, global.ctDesignContainer, global.ctDesignTypography, global.ctDesignButton, global.ctDesignDivider, global.ctDesignIcons, global.styled));
-})(this, (function (exports, jsxRuntime, react, ctDesignContainer, ctDesignTypography, ctDesignButton, ctDesignDivider, ctDesignIcons, styled) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-container'), require('@cleartrip/ct-design-typography'), require('@cleartrip/ct-design-button'), require('@cleartrip/ct-design-divider'), require('@cleartrip/ct-design-loyalty-pill'), require('@cleartrip/ct-design-icons'), require('@cleartrip/ct-design-common-utils'), require('styled-components'), require('@cleartrip/ct-design-intersection-observer'), require('@cleartrip/ct-design-theme')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-container', '@cleartrip/ct-design-typography', '@cleartrip/ct-design-button', '@cleartrip/ct-design-divider', '@cleartrip/ct-design-loyalty-pill', '@cleartrip/ct-design-icons', '@cleartrip/ct-design-common-utils', 'styled-components', '@cleartrip/ct-design-intersection-observer', '@cleartrip/ct-design-theme'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemHeader = {}, global.jsxRuntime, global.React, global.ctDesignContainer, global.ctDesignTypography, global.ctDesignButton, global.ctDesignDivider, global.ctDesignLoyaltyPill, global.ctDesignIcons, global.ctDesignCommonUtils, global.styled, global.ctDesignIntersectionObserver, global.ctDesignTheme));
+})(this, (function (exports, jsxRuntime, react, ctDesignContainer, ctDesignTypography, ctDesignButton, ctDesignDivider, ctDesignLoyaltyPill, ctDesignIcons, ctDesignCommonUtils, styled, ctDesignIntersectionObserver, ctDesignTheme) { 'use strict';
 
     function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -61,6 +61,7 @@
     var OFFERS_URL = '/all-offers/?categories=flights';
     var MY_TRIPS_URL = '/accounts/trips';
     var SUPPORT_URL = '/support';
+    var ELITE_NAV_TEXT = 'Elite';
     var NAVBAR_OPTIONS = [{
       lefticon: ctDesignIcons.Offers,
       text: 'Offers',
@@ -88,7 +89,29 @@
       isHoverable: false,
       isClickable: true,
       link: SUPPORT_URL
+    }, {
+      text: ELITE_NAV_TEXT,
+      ravenActionName: '',
+      isHoverable: true,
+      isClickable: false
     }];
+    var ELITE_HOVER_BUTTON_TEXT = 'View membership benefits';
+    var ELITE_HOVER_LOGIN_BUTTON_TEXT = 'Login to check eligibility';
+    var LOYALTY_STATUS = {
+      ACTIVE: 'ACTIVE',
+      INACTIVE: 'INACTIVE',
+      SUSPENDED: 'SUSPENDED'
+    };
+    var DISPLAY_STATUS = {
+      ACTIVE: 'ACTIVE',
+      INACTIVE: 'INACTIVE',
+      EXPIRING_SOON: 'EXPIRING_SOON',
+      TRACKER_EXPIRING_SOON: 'TRACKER_EXPIRING_SOON',
+      EXPIRED: 'EXPIRED',
+      ACTIVATING_SOON: 'ACTIVATING_SOON'
+    };
+    var EliteChipHoverModalBg = 'https://rukmini-ct.flixcart.com/f_auto,q_auto/offermgmt-prod/offermgmt/images/banner/desktop_pop_up_elite_bgImage-v2.png';
+    var EliteAccountStripBg = 'https://rukmini-ct.flixcart.com/fl_progressive,e_sharpen:80,c_fill,dpr_2,f_auto,q_75/offermgmt-prod/offermgmt/images/banner/desktop-accounts-dropdown-elite-bg.png';
     var LOBS = {
       FLIGHTS: 'Flights',
       HOTELS: 'Hotels',
@@ -146,6 +169,14 @@
     (function (RAVEN_PLATFORMS) {
       RAVEN_PLATFORMS["DESKTOP"] = "desktop";
     })(RAVEN_PLATFORMS || (RAVEN_PLATFORMS = {}));
+    var RAVEN_EVENTS = {
+      UI_ACTION: 'ui_action',
+      CT_LOYALTY_BENEFITS_POPUP_LOAD: 'ct_loyalty_benefits_popup_load'
+    };
+    var RAVEN_ACTIONS = {
+      CT_LOYALTY_VIEW_BENEFITS_CLICK: 'ct_loyalty_view_benefits_click',
+      ELITE_LOGIN_CLICK: 'elite_login_click'
+    };
     var LOG_IN_TEXT = 'Log in';
     var THEME_CONFIG = {
       NOVAC: {
@@ -220,6 +251,16 @@
           return '';
       }
     };
+    var getEliteRavenEventPrefix = function (ravenPageName) {
+      switch (ravenPageName) {
+        case exports.RAVEN_PAGE_NAMES.FLIGHTS_HOME:
+          return 'a_';
+        case exports.RAVEN_PAGE_NAMES.HOTELS_HOME:
+          return 'h_';
+        default:
+          return 'u_';
+      }
+    };
     var ravenSDKTrigger = function (isUserLoggedIn, eventName, ravenPayload, customRavenPayload, ravenPushCallback, pageName) {
       var _a;
       if (typeof ravenPushCallback !== 'function') {
@@ -249,6 +290,165 @@
         return;
       }
     };
+    var getLoyaltyContent = function (eliteDetails, loyaltyProgram) {
+      var _a, _b;
+      var loyaltyContent = (_b = (_a = eliteDetails === null || eliteDetails === void 0 ? void 0 : eliteDetails.find(function (item) {
+        return (item === null || item === void 0 ? void 0 : item.usecase) === 'LOYALTY';
+      })) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b[0];
+      var metaData = loyaltyContent === null || loyaltyContent === void 0 ? void 0 : loyaltyContent.metaData;
+      if (ctDesignCommonUtils.isEmpty(loyaltyContent) || ctDesignCommonUtils.isEmpty(metaData) || (metaData === null || metaData === void 0 ? void 0 : metaData.loyaltyName) !== loyaltyProgram || (metaData === null || metaData === void 0 ? void 0 : metaData.loyaltyStatus) === LOYALTY_STATUS.SUSPENDED) {
+        return null;
+      }
+      return loyaltyContent || null;
+    };
+    var getEliteLoyaltyContent = function (eliteDetails) {
+      return getLoyaltyContent(eliteDetails, ctDesignLoyaltyPill.LoyaltyProgram.ELITE);
+    };
+    var getEliteLoyaltyMetadata = function (eliteDetails) {
+      var _a, _b;
+      return (_b = (_a = getEliteLoyaltyContent(eliteDetails)) === null || _a === void 0 ? void 0 : _a.metaData) !== null && _b !== void 0 ? _b : null;
+    };
+    var getFkBlackLoyaltyContent = function (eliteDetails) {
+      return getLoyaltyContent(eliteDetails, ctDesignLoyaltyPill.LoyaltyProgram.FK_BLACK);
+    };
+    var getFkBlackLoyaltyMetadata = function (eliteDetails) {
+      var _a, _b;
+      return (_b = (_a = getFkBlackLoyaltyContent(eliteDetails)) === null || _a === void 0 ? void 0 : _a.metaData) !== null && _b !== void 0 ? _b : null;
+    };
+    var shouldShowFkBlackLoyaltyChip = function (eliteDetails) {
+      return !!getFkBlackLoyaltyContent(eliteDetails);
+    };
+    var getElitePillState = function (eliteDetails, isUserLoggedIn) {
+      var _a;
+      if (isUserLoggedIn === void 0) {
+        isUserLoggedIn = true;
+      }
+      if (!isUserLoggedIn) {
+        return ctDesignLoyaltyPill.EliteLoyaltyPillStateEnum.LOGGED_OUT;
+      }
+      var displayStatus = (_a = getEliteLoyaltyMetadata(eliteDetails)) === null || _a === void 0 ? void 0 : _a.displayStatus;
+      switch (displayStatus) {
+        case DISPLAY_STATUS.ACTIVE:
+        case DISPLAY_STATUS.ACTIVATING_SOON:
+          return ctDesignLoyaltyPill.EliteLoyaltyPillStateEnum.UNLOCKED;
+        case DISPLAY_STATUS.EXPIRING_SOON:
+          return ctDesignLoyaltyPill.EliteLoyaltyPillStateEnum.EXPIRING;
+        case DISPLAY_STATUS.INACTIVE:
+        case DISPLAY_STATUS.TRACKER_EXPIRING_SOON:
+        case DISPLAY_STATUS.EXPIRED:
+        default:
+          return ctDesignLoyaltyPill.EliteLoyaltyPillStateEnum.LOCKED;
+      }
+    };
+    var hasEliteLoyaltyDetails = function (eliteDetails) {
+      return !!getEliteLoyaltyMetadata(eliteDetails);
+    };
+    var isEliteAccountActive = function (metaData) {
+      return (metaData === null || metaData === void 0 ? void 0 : metaData.displayStatus) === DISPLAY_STATUS.ACTIVE || (metaData === null || metaData === void 0 ? void 0 : metaData.displayStatus) === DISPLAY_STATUS.EXPIRING_SOON;
+    };
+    var getEliteHoverModalContent = function (metaData) {
+      var _a, _b, _c;
+      return (_c = (_b = ((_a = metaData === null || metaData === void 0 ? void 0 : metaData.benefits) !== null && _a !== void 0 ? _a : []).filter(function (benefit) {
+        return benefit === null || benefit === void 0 ? void 0 : benefit.title;
+      })) === null || _b === void 0 ? void 0 : _b.map(function (benefit) {
+        return benefit.title;
+      })) !== null && _c !== void 0 ? _c : [];
+    };
+    var getOrdinalSuffix = function (day) {
+      if (day >= 11 && day <= 13) {
+        return 'th';
+      }
+      switch (day % 10) {
+        case 1:
+          return 'st';
+        case 2:
+          return 'nd';
+        case 3:
+          return 'rd';
+        default:
+          return 'th';
+      }
+    };
+    var formatEliteUnlockDate = function (unlockDate) {
+      if (!unlockDate) {
+        return '';
+      }
+      var isoDateMatch = unlockDate.match(/^(\d{4})-(\d{2})-(\d{2})/);
+      var date = isoDateMatch ? new Date(Number(isoDateMatch[1]), Number(isoDateMatch[2]) - 1, Number(isoDateMatch[3])) : new Date(unlockDate);
+      if (Number.isNaN(date.getTime())) {
+        return '';
+      }
+      var day = date.getDate();
+      var month = date.toLocaleDateString('en-GB', {
+        month: 'short'
+      });
+      return "".concat(day).concat(getOrdinalSuffix(day), " ").concat(month);
+    };
+    var getAccountEliteStripText = function (metaData) {
+      var displayStatus = metaData.displayStatus,
+        unlockDate = metaData.unlockDate;
+      switch (displayStatus) {
+        case DISPLAY_STATUS.ACTIVATING_SOON:
+          {
+            var formattedUnlockDate = formatEliteUnlockDate(unlockDate);
+            return {
+              prefix: 'Your',
+              suffix: formattedUnlockDate ? "benefits unlock on ".concat(formattedUnlockDate) : 'benefits unlock soon'
+            };
+          }
+        case DISPLAY_STATUS.INACTIVE:
+        case DISPLAY_STATUS.TRACKER_EXPIRING_SOON:
+        case DISPLAY_STATUS.EXPIRED:
+          return {
+            prefix: 'Unlock',
+            suffix: 'membership'
+          };
+        default:
+          return {
+            prefix: 'Your',
+            suffix: 'membership'
+          };
+      }
+    };
+    var redirectToEliteUrl = function (url) {
+      if (url) window.location.href = url;
+    };
+    var mapDisplayStatusToRavenEliteStatus = function (displayStatus) {
+      switch (displayStatus) {
+        case DISPLAY_STATUS.ACTIVE:
+          return 'active';
+        case DISPLAY_STATUS.EXPIRING_SOON:
+          return 'expiring_soon';
+        case DISPLAY_STATUS.INACTIVE:
+          return 'inactive';
+        default:
+          return 'na';
+      }
+    };
+    var getEliteRavenAttributes = function (eliteDetails) {
+      var _a, _b;
+      var eliteContent = getEliteLoyaltyContent(eliteDetails);
+      if (ctDesignCommonUtils.isEmpty(eliteContent === null || eliteContent === void 0 ? void 0 : eliteContent.metaData)) {
+        return {};
+      }
+      var _c = eliteContent !== null && eliteContent !== void 0 ? eliteContent : {},
+        metaData = _c.metaData,
+        constraintList = _c.constraintList,
+        partnerProgram = _c.partnerProgram,
+        allotmentDate = _c.allotmentDate,
+        viewExpiryDate = _c.viewExpiryDate;
+        _c.lifetimeSavings;
+      var _d = (_a = constraintList === null || constraintList === void 0 ? void 0 : constraintList[0]) !== null && _a !== void 0 ? _a : {},
+        target = _d.target,
+        bookingCount = _d.bookingCount;
+      return {
+        elite_status: (_b = mapDisplayStatusToRavenEliteStatus(metaData === null || metaData === void 0 ? void 0 : metaData.displayStatus)) !== null && _b !== void 0 ? _b : 'na',
+        elite_progress: target ? "".concat(bookingCount, "/").concat(target) : 'na',
+        partner_program_source: partnerProgram !== null && partnerProgram !== void 0 ? partnerProgram : 'na',
+        elite_unlock_date: allotmentDate !== null && allotmentDate !== void 0 ? allotmentDate : 'na',
+        elite_membership_end_date: viewExpiryDate !== null && viewExpiryDate !== void 0 ? viewExpiryDate : 'na'
+      };
+    };
 
     var LobsHeader = function () {
       var _a = useHeaderContext(),
@@ -534,8 +734,8 @@
         backgroundColor: '#FBEFEF'
       }
     };
-    var moveRight = styled.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 = styled.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 moveRight = /*#__PURE__*/styled.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 = /*#__PURE__*/styled.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',
@@ -547,6 +747,32 @@
       overflow: 'hidden',
       borderRadius: '50%'
     };
+    var getAccountEliteSectionStyles = function (theme) {
+      return {
+        background: 'linear-gradient(90deg, #fce9ff 26.53%, #ffefee 88.06%)',
+        padding: "".concat(theme.spacing[2], " ").concat(theme.spacing[4]),
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center'
+      };
+    };
+    var getEliteTxtSvgStyles = function (theme) {
+      return {
+        display: 'flex',
+        flexDirection: 'column',
+        alignSelf: 'center',
+        margin: "auto ".concat(theme.spacing[1])
+      };
+    };
+    var getAccountUnlockedBgStyles = function (isEliteUnlocked, bgImgUrl) {
+      if (isEliteUnlocked) return {
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundImage: "url(".concat(bgImgUrl, ")")
+      };
+      return {};
+    };
     var getLoginButtonBgColorStyles = function (saleThemeEnabled) {
       if (saleThemeEnabled) {
         return {
@@ -720,6 +946,203 @@
     };
     var templateObject_1;
 
+    var useEliteRaven = function () {
+      var _a = useHeaderContext(),
+        eliteDetails = _a.eliteDetails,
+        ravenPushCallback = _a.ravenPushCallback,
+        ravenPageName = _a.ravenPageName,
+        isUserLoggedIn = _a.isUserLoggedIn,
+        _b = _a.ravenPayload,
+        ravenPayload = _b === void 0 ? {} : _b;
+      var ravenAttributes = react.useMemo(function () {
+        return getEliteRavenAttributes(eliteDetails);
+      }, [eliteDetails]);
+      var ravenEventPrefix = react.useMemo(function () {
+        return getEliteRavenEventPrefix(ravenPageName);
+      }, [ravenPageName]);
+      var triggerRavenEvent = react.useCallback(function (eventSuffix, payload) {
+        if (payload === void 0) {
+          payload = {};
+        }
+        if (!ravenPushCallback) {
+          return;
+        }
+        ravenSDKTrigger(isUserLoggedIn, "".concat(ravenEventPrefix).concat(eventSuffix), __assign(__assign({}, ravenAttributes), payload), ravenPayload, ravenPushCallback, ravenPageName);
+      }, [isUserLoggedIn, ravenAttributes, ravenEventPrefix, ravenPayload, ravenPushCallback, ravenPageName]);
+      return {
+        ravenEventPrefix: ravenEventPrefix,
+        ravenAttributes: ravenAttributes,
+        ravenPushCallback: ravenPushCallback,
+        isUserLoggedIn: isUserLoggedIn,
+        ravenPageName: ravenPageName,
+        triggerRavenEvent: triggerRavenEvent
+      };
+    };
+
+    var ELITE_DROPDOWN_POSITION_OFFSET = 30;
+    var ELITE_DROPDOWN_TOP = '76px';
+    var ELITE_DROPDOWN_WIDTH = '360px';
+    var ELITE_DROPDOWN_Z_INDEX = 1002;
+    var getEliteDropdownContainerStyles = function (theme, contentHeight) {
+      return {
+        position: 'fixed',
+        top: ELITE_DROPDOWN_TOP,
+        width: ELITE_DROPDOWN_WIDTH,
+        zIndex: ELITE_DROPDOWN_Z_INDEX,
+        backgroundColor: theme.color.background.neutral,
+        borderRadius: theme.border.radius[16],
+        boxShadow: theme.elevation.bottomE3,
+        overflow: 'hidden',
+        opacity: 0,
+        backgroundImage: "url(".concat(EliteChipHoverModalBg, ")"),
+        backgroundSize: contentHeight ? "100% ".concat(contentHeight, "px") : '100% auto',
+        backgroundPosition: 'top center',
+        backgroundRepeat: 'no-repeat',
+        paddingLeft: theme.spacing[7],
+        paddingRight: theme.spacing[7],
+        paddingBottom: theme.spacing[9]
+      };
+    };
+    var getEliteBenefitsGridStyles = function (theme) {
+      return {
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        gap: theme.spacing[3],
+        margin: "".concat(theme.spacing[4], " 0 ").concat(theme.spacing[6])
+      };
+    };
+    var getEliteBenefitCardStyles = function (theme) {
+      return {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: theme.spacing[3],
+        backgroundColor: theme.color.text.neutral50,
+        borderRadius: theme.border.radius[16]
+      };
+    };
+
+    var EliteBenefitsContent = function (_a) {
+      var _b = _a.benefits,
+        benefits = _b === void 0 ? [] : _b,
+        ctaText = _a.ctaText,
+        showCta = _a.showCta,
+        onCtaClick = _a.onCtaClick,
+        _c = _a.hideRedirectionCTA,
+        hideRedirectionCTA = _c === void 0 ? false : _c;
+      var theme = ctDesignTheme.useTheme();
+      return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [(benefits === null || benefits === void 0 ? void 0 : benefits.length) > 0 && jsxRuntime.jsx(ctDesignContainer.Container, __assign({
+          css: getEliteBenefitsGridStyles(theme)
+        }, {
+          children: benefits === null || benefits === void 0 ? void 0 : benefits.map(function (benefit, index) {
+            return jsxRuntime.jsx(ctDesignContainer.Container, __assign({
+              css: getEliteBenefitCardStyles(theme)
+            }, {
+              children: jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
+                variant: 'HM3',
+                className: 'ta-center'
+              }, {
+                children: benefit
+              }))
+            }), index);
+          })
+        })), showCta && ctaText && !hideRedirectionCTA && jsxRuntime.jsx(ctDesignButton.Button, __assign({
+          className: 'w-100p',
+          onClick: onCtaClick
+        }, {
+          children: ctaText
+        }))]
+      });
+    };
+
+    var EliteDropDownContent = function (_a) {
+      var isOpen = _a.isOpen;
+      var theme = ctDesignTheme.useTheme();
+      var _b = useHeaderContext(),
+        eliteDetails = _b.eliteDetails,
+        onLoginButtonClick = _b.onLoginButtonClick,
+        _c = _b.hideEliteRedirectionCTA,
+        hideEliteRedirectionCTA = _c === void 0 ? false : _c;
+      var eliteMetadata = getEliteLoyaltyMetadata(eliteDetails);
+      var _d = useEliteRaven(),
+        isUserLoggedIn = _d.isUserLoggedIn,
+        triggerRavenEvent = _d.triggerRavenEvent;
+      var containerRef = useDropdownAnimation(isOpen).containerRef;
+      var _e = react.useState(),
+        leftPosition = _e[0],
+        setLeftPosition = _e[1];
+      var _f = react.useState(),
+        contentHeight = _f[0],
+        setContentHeight = _f[1];
+      var benefits = getEliteHoverModalContent(eliteMetadata);
+      react.useLayoutEffect(function () {
+        if (!containerRef.current) {
+          return;
+        }
+        var _a = containerRef.current.getBoundingClientRect(),
+          left = _a.left,
+          width = _a.width;
+        setLeftPosition(left - width / 2 + ELITE_DROPDOWN_POSITION_OFFSET);
+        setContentHeight(containerRef.current.scrollHeight);
+      }, [containerRef]);
+      var handleIntersection = react.useCallback(function () {
+        triggerRavenEvent(RAVEN_EVENTS.CT_LOYALTY_BENEFITS_POPUP_LOAD);
+      }, [triggerRavenEvent]);
+      var handleViewBenefitsClick = react.useCallback(function () {
+        if (!(eliteMetadata === null || eliteMetadata === void 0 ? void 0 : eliteMetadata.redirectionUrl)) {
+          return;
+        }
+        triggerRavenEvent(RAVEN_EVENTS.UI_ACTION, {
+          action_name: RAVEN_ACTIONS.CT_LOYALTY_VIEW_BENEFITS_CLICK
+        });
+        redirectToEliteUrl(eliteMetadata.redirectionUrl);
+      }, [eliteMetadata, triggerRavenEvent]);
+      var handleEliteLoginClick = react.useCallback(function () {
+        triggerRavenEvent(RAVEN_EVENTS.UI_ACTION, {
+          action_name: RAVEN_ACTIONS.ELITE_LOGIN_CLICK
+        });
+        onLoginButtonClick({
+          isEliteLogin: true
+        });
+      }, [onLoginButtonClick, triggerRavenEvent]);
+      var showCta = isUserLoggedIn ? !!(eliteMetadata === null || eliteMetadata === void 0 ? void 0 : eliteMetadata.redirectionUrl) : true;
+      var ctaText = isUserLoggedIn ? ELITE_HOVER_BUTTON_TEXT : ELITE_HOVER_LOGIN_BUTTON_TEXT;
+      var onCtaClick = isUserLoggedIn ? handleViewBenefitsClick : handleEliteLoginClick;
+      if (!eliteMetadata) {
+        return null;
+      }
+      return jsxRuntime.jsx(ctDesignIntersectionObserver.IntersectionObserver, __assign({
+        onIntersection: handleIntersection
+      }, {
+        children: jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
+          ref: containerRef,
+          className: 'o-0',
+          css: __assign(__assign({}, getEliteDropdownContainerStyles(theme, contentHeight)), {
+            left: leftPosition && "".concat(leftPosition, "px")
+          })
+        }, {
+          children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({
+            className: 'ta-center',
+            css: {
+              marginTop: theme.spacing[9]
+            }
+          }, {
+            children: jsxRuntime.jsx(ctDesignIcons.EliteText, {
+              width: 120,
+              height: 48
+            })
+          })), jsxRuntime.jsx(EliteBenefitsContent, {
+            benefits: benefits,
+            showCta: showCta,
+            ctaText: ctaText,
+            onCtaClick: onCtaClick,
+            hideRedirectionCTA: hideEliteRedirectionCTA
+          })]
+        }))
+      }));
+    };
+
     var ACCOUNT_OPTIONS_POPUP_CONFIG = [{
       text: 'My Profile',
       icon: jsxRuntime.jsx(ctDesignIcons.MyAccount, {
@@ -788,26 +1211,30 @@
         ravenPageName = _b.ravenPageName,
         _c = _b.ravenPayload,
         ravenPayload = _c === void 0 ? {} : _c,
-        ravenEventName = _b.ravenEventName;
+        ravenEventName = _b.ravenEventName,
+        eliteDetails = _b.eliteDetails;
       var _d = react.useState(false),
         isHovered = _d[0],
         setIsHovered = _d[1];
       var handleClick = react.useCallback(function () {
-        var _a;
+        var _a, _b;
         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';
+          return;
         }
-      }, [handleChipClick, loyaltyType, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
+        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);
+        var redirectionUrl = (_b = getFkBlackLoyaltyMetadata(eliteDetails)) === null || _b === void 0 ? void 0 : _b.redirectionUrl;
+        if (redirectionUrl) {
+          redirectToEliteUrl(redirectionUrl);
+        }
+      }, [handleChipClick, loyaltyType, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, eliteDetails]);
       return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
         display: 'flex',
         position: 'relative',
@@ -892,6 +1319,7 @@
       LoyaltyType["InsiderIcon"] = "InsiderIcon";
       LoyaltyType["InsiderElite"] = "InsiderElite";
       LoyaltyType["CtLoyalty"] = "CtLoyalty";
+      LoyaltyType["Elite"] = "ELITE";
     })(exports.LoyaltyType || (exports.LoyaltyType = {}));
 
     var _a;
@@ -1009,23 +1437,24 @@
       }));
     };
     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 _a = useHeaderContext(),
+        eliteDetails = _a.eliteDetails,
+        _b = _a.fkSupercoinBurnBalance,
+        superCoinBalance = _b === void 0 ? 0 : _b,
+        _c = _a.walletBalance,
+        walletBalance = _c === void 0 ? 0 : _c,
+        loyaltyLoading = _a.loyaltyLoading,
+        superCoinsLoading = _a.superCoinsLoading,
+        walletLoading = _a.walletLoading,
+        walletChipClick = _a.walletChipClick,
+        supercoinsChipClick = _a.supercoinsChipClick,
+        loyaltyChipClick = _a.loyaltyChipClick,
+        hideWalletChip = _a.hideWalletChip,
+        hideSupercoinsChip = _a.hideSupercoinsChip,
+        hideLoyaltyChip = _a.hideLoyaltyChip;
+      var fkBlackLoyaltyChipData = LOYALTY_DATA[exports.LoyaltyType.FkVip];
+      var hasFkBlackLoyalty = shouldShowFkBlackLoyaltyChip(eliteDetails) && !hideLoyaltyChip && !!fkBlackLoyaltyChipData;
+      var shouldShowLoyalty = loyaltyLoading || hasFkBlackLoyalty;
       var shouldShowSupercoin = superCoinsLoading || !hideSupercoinsChip;
       var shouldShowWallet = walletLoading || !hideWalletChip;
       if (!shouldShowLoyalty && !shouldShowSupercoin && !shouldShowWallet) {
@@ -1045,11 +1474,11 @@
           height: '32px',
           borderRadius: '8px',
           backgroundColor: '#efefef'
-        }) : selectedLoyaltyType && LOYALTY_DATA[selectedLoyaltyType] && !hideLoyaltyChip && jsxRuntime.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',
+        }) : hasFkBlackLoyalty && jsxRuntime.jsx(LoyaltyChip, {
+          icon: fkBlackLoyaltyChipData.icon,
+          borderGradient: fkBlackLoyaltyChipData.borderGradient,
+          backgroundGradient: fkBlackLoyaltyChipData.backgroundGradient,
+          chevronFillColor: fkBlackLoyaltyChipData.chevronFillColor || '#FFF',
           handleChipClick: loyaltyChipClick
         }), superCoinsLoading ? jsxRuntime.jsx(ctDesignContainer.Container, {
           width: '50px',
@@ -1081,6 +1510,77 @@
       }));
     };
 
+    var ELITE_STATUS_LABEL = {
+      ACTIVE: 'ACTIVE',
+      EXPIRING_SOON: 'EXPIRING SOON'
+    };
+    var eliteStatusBadgeStyles = function (theme, isExpiringSoon) {
+      return {
+        background: isExpiringSoon ? theme.color.badge.alertYellow500 : theme.color.badge.successGreen500,
+        borderRadius: '4px',
+        padding: '4px'
+      };
+    };
+    var EliteStatusBadge = function (_a) {
+      var metaData = _a.metaData;
+      var theme = ctDesignTheme.useTheme();
+      if (!isEliteAccountActive(metaData)) {
+        return null;
+      }
+      var isExpiringSoon = metaData.displayStatus === DISPLAY_STATUS.EXPIRING_SOON;
+      return jsxRuntime.jsx(ctDesignContainer.Container, __assign({
+        css: eliteStatusBadgeStyles(theme, isExpiringSoon)
+      }, {
+        children: jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
+          color: 'neutral750',
+          variant: 'B4CAPS'
+        }, {
+          children: isExpiringSoon ? ELITE_STATUS_LABEL.EXPIRING_SOON : ELITE_STATUS_LABEL.ACTIVE
+        }))
+      }));
+    };
+
+    var AccountEliteStrip = function (_a) {
+      var metaData = _a.metaData;
+      var theme = ctDesignTheme.useTheme();
+      var triggerRavenEvent = useEliteRaven().triggerRavenEvent;
+      var redirectionUrl = metaData.redirectionUrl;
+      var _b = react.useMemo(function () {
+          return getAccountEliteStripText(metaData);
+        }, [metaData]),
+        prefix = _b.prefix,
+        suffix = _b.suffix;
+      var handleStripClick = react.useCallback(function () {
+        if (!redirectionUrl) {
+          return;
+        }
+        triggerRavenEvent(RAVEN_EVENTS.UI_ACTION, {
+          action_name: RAVEN_ACTIONS.CT_LOYALTY_VIEW_BENEFITS_CLICK
+        });
+        redirectToEliteUrl(redirectionUrl);
+      }, [redirectionUrl, triggerRavenEvent]);
+      return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
+        className: "account-elite-section ".concat(redirectionUrl ? 'c-pointer' : ''),
+        css: getAccountEliteSectionStyles(theme),
+        onClick: handleStripClick
+      }, {
+        children: [jsxRuntime.jsxs(ctDesignTypography.Typography, __assign({
+          variant: 'B2',
+          className: 'flex'
+        }, {
+          children: [prefix, " ", jsxRuntime.jsx(ctDesignIcons.EliteText, {
+            className: 'elite-txt-svg',
+            style: getEliteTxtSvgStyles(theme)
+          }), " ", suffix, ' ', redirectionUrl && jsxRuntime.jsx(ctDesignIcons.HeaderChevronRight, {
+            width: 20,
+            height: 20
+          })]
+        })), jsxRuntime.jsx(EliteStatusBadge, {
+          metaData: metaData
+        })]
+      }));
+    };
+
     var AccountDropdownContent = function (_a) {
       var isOpen = _a.isOpen;
       var _b = useHeaderContext(),
@@ -1090,21 +1590,25 @@
         countryCode = _b.countryCode,
         userDetailsLoading = _b.userDetailsLoading,
         loyaltyType = _b.loyaltyType,
+        eliteDetails = _b.eliteDetails,
+        _c = _b.hideEliteRedirectionCTA,
+        hideEliteRedirectionCTA = _c === void 0 ? false : _c,
         isUserLoggedIn = _b.isUserLoggedIn,
         ravenEventName = _b.ravenEventName,
         ravenPageName = _b.ravenPageName,
-        _c = _b.ravenPayload,
-        ravenPayload = _c === void 0 ? {} : _c,
+        _d = _b.ravenPayload,
+        ravenPayload = _d === void 0 ? {} : _d,
         ravenPushCallback = _b.ravenPushCallback;
+      var eliteMetadata = getEliteLoyaltyMetadata(eliteDetails);
       var containerRef = useDropdownAnimation(isOpen).containerRef;
-      var _d = react.useMemo(function () {
+      var _e = react.useMemo(function () {
           return {
             userGreeting: userName ? "Hello ".concat(userName, "!") : '',
             phoneNumber: countryCode && userMobileNumber ? "".concat(countryCode, " ").concat(userMobileNumber) : ''
           };
         }, [userName, userMobileNumber, countryCode]),
-        userGreeting = _d.userGreeting,
-        phoneNumber = _d.phoneNumber;
+        userGreeting = _e.userGreeting,
+        phoneNumber = _e.phoneNumber;
       var generateRavenPayload = function (actionName) {
         var _a;
         return {
@@ -1177,12 +1681,18 @@
         width: "".concat(ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px"),
         background: '#FFF1EC'
       }, {
-        children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({
-          padding: '16px',
-          height: '76px'
+        children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
+          css: getAccountUnlockedBgStyles(isEliteAccountActive(eliteMetadata), EliteAccountStripBg)
         }, {
-          children: renderUserData()
-        })), jsxRuntime.jsx(RewardsSection, {}), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
+          children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({
+            padding: '16px',
+            height: '76px'
+          }, {
+            children: renderUserData()
+          })), jsxRuntime.jsx(RewardsSection, {})]
+        })), hasEliteLoyaltyDetails(eliteDetails) && eliteMetadata && !hideEliteRedirectionCTA && jsxRuntime.jsx(AccountEliteStrip, {
+          metaData: eliteMetadata
+        }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
           display: 'flex',
           flexDirection: 'column',
           padding: '8px',
@@ -1370,16 +1880,19 @@
         showAllLobs = _c === void 0 ? false : _c,
         isUserLoggedIn = _b.isUserLoggedIn,
         loyaltyType = _b.loyaltyType,
+        eliteDetails = _b.eliteDetails,
         _d = _b.isNovacThemeEnabled,
         isNovacThemeEnabled = _d === void 0 ? false : _d,
         _e = _b.ravenPayload,
         ravenPayload = _e === void 0 ? {} : _e,
         ravenPushCallback = _b.ravenPushCallback,
         ravenPageName = _b.ravenPageName,
-        ravenEventName = _b.ravenEventName;
-      var _f = react.useState(false),
-        scrolled = _f[0],
-        setScrolled = _f[1];
+        ravenEventName = _b.ravenEventName,
+        _f = _b.hideNavbar,
+        hideNavbar = _f === void 0 ? false : _f;
+      var _g = react.useState(false),
+        scrolled = _g[0],
+        setScrolled = _g[1];
       react.useEffect(function () {
         var handleScroll = function () {
           setScrolled(window.scrollY >= 50);
@@ -1396,15 +1909,15 @@
         hoverColor = headerTheme.hoverColor,
         fkcompanyColor = headerTheme.fkcompanyColor,
         typographyColor = headerTheme.typographyColor;
-      var _g = useHoverDropdown({
+      var _h = useHoverDropdown({
           openDelay: 0
         }),
-        isDropdownVisible = _g.isDropdownVisible,
-        hoveredElemIndex = _g.hoveredElemIndex,
-        handleOnMouseEnter = _g.handleOnMouseEnter,
-        handleOnMouseLeave = _g.handleOnMouseLeave,
-        handleDropdownMouseEnter = _g.handleDropdownMouseEnter,
-        handleDropdownMouseLeave = _g.handleDropdownMouseLeave;
+        isDropdownVisible = _h.isDropdownVisible,
+        hoveredElemIndex = _h.hoveredElemIndex,
+        handleOnMouseEnter = _h.handleOnMouseEnter,
+        handleOnMouseLeave = _h.handleOnMouseLeave,
+        handleDropdownMouseEnter = _h.handleDropdownMouseEnter,
+        handleDropdownMouseLeave = _h.handleDropdownMouseLeave;
       var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
       var createPayload = react.useCallback(function (actionName, actionType) {
         return {
@@ -1415,8 +1928,9 @@
         };
       }, [utmSource, loyaltyType]);
       var handleNavbarOptionsClick = react.useCallback(function (option) {
+        var _a;
         if (option.isClickable && option.link) {
-          var actionName = "".concat(option.text.toLowerCase().replace(/\s/g, ''), "_header_click");
+          var actionName = "".concat((_a = option.text) === null || _a === void 0 ? void 0 : _a.toLowerCase().replace(/\s/g, ''), "_header_click");
           var payload = createPayload(actionName, 'click');
           ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
           window.location.href = option.link;
@@ -1428,7 +1942,8 @@
         window.location.href = '/';
       }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
       var triggerRavenEventOnHover = react.useCallback(function (option) {
-        var actionName = "".concat(option.text.toLowerCase().replace(/\s/g, ''), "_header_hover");
+        var _a;
+        var actionName = "".concat((_a = option.text) === null || _a === void 0 ? void 0 : _a.toLowerCase().replace(/\s/g, ''), "_header_hover");
         var payload = createPayload(actionName, 'hover');
         ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
       }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
@@ -1482,7 +1997,7 @@
               }), jsxRuntime.jsx(ctDesignIcons.Fkcompany, {
                 color: fkcompanyColor
               })]
-            })), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
+            })), !hideNavbar && jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
               display: 'flex',
               flexDirection: 'row',
               alignItems: 'center',
@@ -1502,11 +2017,16 @@
                     RightIcon = option.rightIcon,
                     isHoverable = option.isHoverable;
                   var isHovered = hoveredElemIndex === index;
+                  var isEliteNavOption = text === ELITE_NAV_TEXT;
+                  if (isEliteNavOption && !hasEliteLoyaltyDetails(eliteDetails)) {
+                    return null;
+                  }
+                  var isDropdownOpen = hoveredElemIndex === index && isHoverable && isDropdownVisible;
                   return jsxRuntime.jsxs(ctDesignContainer.Container, {
-                    children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
+                    children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({
                       onMouseEnter: function () {
                         handleOnMouseEnter(index);
-                        if (option.isHoverable) {
+                        if (option.isHoverable && !isEliteNavOption) {
                           triggerRavenEventOnHover(option);
                         }
                       },
@@ -1514,7 +2034,7 @@
                       display: 'flex',
                       flexDirection: 'row',
                       alignItems: 'center',
-                      padding: '8px 12px 8px 12px',
+                      padding: isEliteNavOption ? '' : '8px 12px 8px 12px',
                       cursor: 'pointer',
                       position: 'relative',
                       columnGap: 8,
@@ -1523,37 +2043,45 @@
                         return handleNavbarOptionsClick(option);
                       }
                     }, {
-                      children: [jsxRuntime.jsx(LeftIcon, {
-                        color: isHovered ? hoverColor : typographyColor
-                      }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center'
-                      }, {
-                        children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
-                          variant: 'B2',
-                          colorCode: isHovered ? hoverColor : typographyColor,
-                          isClickable: true
+                      children: isEliteNavOption ? jsxRuntime.jsx(ctDesignLoyaltyPill.EliteLoyaltyPill, {
+                        state: getElitePillState(eliteDetails, isUserLoggedIn),
+                        animate: true,
+                        onHover: function () {}
+                      }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                        children: [LeftIcon && jsxRuntime.jsx(LeftIcon, {
+                          color: isHovered ? hoverColor : typographyColor
+                        }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
+                          display: 'flex',
+                          flexDirection: 'row',
+                          alignItems: 'center'
                         }, {
-                          children: text
-                        })), RightIcon && jsxRuntime.jsx(RightIcon, {
-                          width: 20,
-                          height: 20,
-                          fill: isHovered ? hoverColor : typographyColor
-                        })]
-                      }))]
-                    }), "nav-option-".concat(index)), jsxRuntime.jsx(HeaderAnimatedMask, __assign({
-                      show: hoveredElemIndex === index && isHoverable && isDropdownVisible,
+                          children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
+                            variant: 'B2',
+                            colorCode: isHovered ? hoverColor : typographyColor,
+                            isClickable: true
+                          }, {
+                            children: text
+                          })), RightIcon && jsxRuntime.jsx(RightIcon, {
+                            width: 20,
+                            height: 20,
+                            fill: isHovered ? hoverColor : typographyColor
+                          })]
+                        }))]
+                      })
+                    })), jsxRuntime.jsx(HeaderAnimatedMask, __assign({
+                      show: isDropdownOpen,
                       marginTop: '64px',
                       handleDropdownMouseEnter: handleDropdownMouseEnter,
                       handleDropdownMouseLeave: handleDropdownMouseLeave,
                       onMaskClick: handleDropdownMouseLeave
                     }, {
-                      children: jsxRuntime.jsx(BusinessDropdownContent, {
-                        isOpen: hoveredElemIndex === index && isHoverable && isDropdownVisible
+                      children: isEliteNavOption ? jsxRuntime.jsx(EliteDropDownContent, {
+                        isOpen: isDropdownOpen
+                      }) : jsxRuntime.jsx(BusinessDropdownContent, {
+                        isOpen: isDropdownOpen
                       })
                     }))]
-                  });
+                  }, "nav-option-".concat(index));
                 })
               })), isUserLoggedIn && jsxRuntime.jsx(ctDesignDivider.Divider, {
                 css: {
@@ -1570,7 +2098,9 @@
                 }, {
                   children: jsxRuntime.jsx(UserAccount, {})
                 })) : jsxRuntime.jsx(ctDesignButton.Button, __assign({
-                  onClick: onLoginButtonClick,
+                  onClick: function () {
+                    return onLoginButtonClick();
+                  },
                   css: __assign({
                     width: 153,
                     height: 40