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

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

@@ -1,16 +1,21 @@
 import { __assign, __makeTemplateObject, __spreadArray } from 'tslib';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, useContext, useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { createContext, useContext, useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect } from 'react';
 import { Container } from '@cleartrip/ct-design-container';
 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 { EliteLoyaltyPillStateEnum, LoyaltyProgram, EliteLoyaltyPill } from '@cleartrip/ct-design-loyalty-pill';
+import { Offers, BusinessBag, ChevronDown, MyTrips, SupportIcon, ArrowRight, EliteText, MyAccount, SavedCard, Travellers, HiFive, Wallet, SettingsCog, PrivacyRights, HeaderChevronRight, FkBlackIcon, FkGold, InsiderIcon, InsiderElite, CtLoyalty, Supercoin, Signout, CTLogo, Fkcompany } from '@cleartrip/ct-design-icons';
+import { isEmpty } from '@cleartrip/ct-design-common-utils';
 import styled, { keyframes } from 'styled-components';
+import { IntersectionObserver } from '@cleartrip/ct-design-intersection-observer';
+import { useTheme } from '@cleartrip/ct-design-theme';
 
 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: Offers,
   text: 'Offers',
@@ -38,7 +43,29 @@ var NAVBAR_OPTIONS = [{
   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',
@@ -96,6 +123,14 @@ var RAVEN_PLATFORMS;
 (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: {
@@ -170,6 +205,16 @@ var ravenLoyaltyTypes = function (loyaltyType) {
       return '';
   }
 };
+var getEliteRavenEventPrefix = function (ravenPageName) {
+  switch (ravenPageName) {
+    case RAVEN_PAGE_NAMES.FLIGHTS_HOME:
+      return 'a_';
+    case 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') {
@@ -199,6 +244,165 @@ var ravenSDKTrigger = function (isUserLoggedIn, eventName, ravenPayload, customR
     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 (isEmpty(loyaltyContent) || 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, 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, 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 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 EliteLoyaltyPillStateEnum.UNLOCKED;
+    case DISPLAY_STATUS.EXPIRING_SOON:
+      return EliteLoyaltyPillStateEnum.EXPIRING;
+    case DISPLAY_STATUS.INACTIVE:
+    case DISPLAY_STATUS.TRACKER_EXPIRING_SOON:
+    case DISPLAY_STATUS.EXPIRED:
+    default:
+      return 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 (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(),
@@ -484,8 +688,8 @@ var logoutButtonHoverStyles = {
     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 moveRight = /*#__PURE__*/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__*/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',
@@ -497,6 +701,32 @@ var arrowContainerStyles = {
   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 {
@@ -670,6 +900,203 @@ var BusinessDropdownContent = function (_a) {
 };
 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 = useMemo(function () {
+    return getEliteRavenAttributes(eliteDetails);
+  }, [eliteDetails]);
+  var ravenEventPrefix = useMemo(function () {
+    return getEliteRavenEventPrefix(ravenPageName);
+  }, [ravenPageName]);
+  var triggerRavenEvent = 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 = useTheme();
+  return jsxs(Fragment, {
+    children: [(benefits === null || benefits === void 0 ? void 0 : benefits.length) > 0 && jsx(Container, __assign({
+      css: getEliteBenefitsGridStyles(theme)
+    }, {
+      children: benefits === null || benefits === void 0 ? void 0 : benefits.map(function (benefit, index) {
+        return jsx(Container, __assign({
+          css: getEliteBenefitCardStyles(theme)
+        }, {
+          children: jsx(Typography, __assign({
+            variant: 'HM3',
+            className: 'ta-center'
+          }, {
+            children: benefit
+          }))
+        }), index);
+      })
+    })), showCta && ctaText && !hideRedirectionCTA && jsx(Button, __assign({
+      className: 'w-100p',
+      onClick: onCtaClick
+    }, {
+      children: ctaText
+    }))]
+  });
+};
+
+var EliteDropDownContent = function (_a) {
+  var isOpen = _a.isOpen;
+  var theme = 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 = useState(),
+    leftPosition = _e[0],
+    setLeftPosition = _e[1];
+  var _f = useState(),
+    contentHeight = _f[0],
+    setContentHeight = _f[1];
+  var benefits = getEliteHoverModalContent(eliteMetadata);
+  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 = useCallback(function () {
+    triggerRavenEvent(RAVEN_EVENTS.CT_LOYALTY_BENEFITS_POPUP_LOAD);
+  }, [triggerRavenEvent]);
+  var handleViewBenefitsClick = 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 = 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 jsx(IntersectionObserver, __assign({
+    onIntersection: handleIntersection
+  }, {
+    children: jsxs(Container, __assign({
+      ref: containerRef,
+      className: 'o-0',
+      css: __assign(__assign({}, getEliteDropdownContainerStyles(theme, contentHeight)), {
+        left: leftPosition && "".concat(leftPosition, "px")
+      })
+    }, {
+      children: [jsx(Container, __assign({
+        className: 'ta-center',
+        css: {
+          marginTop: theme.spacing[9]
+        }
+      }, {
+        children: jsx(EliteText, {
+          width: 120,
+          height: 48
+        })
+      })), jsx(EliteBenefitsContent, {
+        benefits: benefits,
+        showCta: showCta,
+        ctaText: ctaText,
+        onCtaClick: onCtaClick,
+        hideRedirectionCTA: hideEliteRedirectionCTA
+      })]
+    }))
+  }));
+};
+
 var ACCOUNT_OPTIONS_POPUP_CONFIG = [{
   text: 'My Profile',
   icon: jsx(MyAccount, {
@@ -738,26 +1165,30 @@ var LoyaltyChip = function (_a) {
     ravenPageName = _b.ravenPageName,
     _c = _b.ravenPayload,
     ravenPayload = _c === void 0 ? {} : _c,
-    ravenEventName = _b.ravenEventName;
+    ravenEventName = _b.ravenEventName,
+    eliteDetails = _b.eliteDetails;
   var _d = useState(false),
     isHovered = _d[0],
     setIsHovered = _d[1];
   var handleClick = 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 jsxs(Container, __assign({
     display: 'flex',
     position: 'relative',
@@ -842,6 +1273,7 @@ var LoyaltyType;
   LoyaltyType["InsiderIcon"] = "InsiderIcon";
   LoyaltyType["InsiderElite"] = "InsiderElite";
   LoyaltyType["CtLoyalty"] = "CtLoyalty";
+  LoyaltyType["Elite"] = "ELITE";
 })(LoyaltyType || (LoyaltyType = {}));
 
 var _a;
@@ -959,23 +1391,24 @@ var ExpandableItem = function (_a) {
   }));
 };
 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[LoyaltyType.FkVip];
+  var hasFkBlackLoyalty = shouldShowFkBlackLoyaltyChip(eliteDetails) && !hideLoyaltyChip && !!fkBlackLoyaltyChipData;
+  var shouldShowLoyalty = loyaltyLoading || hasFkBlackLoyalty;
   var shouldShowSupercoin = superCoinsLoading || !hideSupercoinsChip;
   var shouldShowWallet = walletLoading || !hideWalletChip;
   if (!shouldShowLoyalty && !shouldShowSupercoin && !shouldShowWallet) {
@@ -995,11 +1428,11 @@ var RewardsSection = function () {
       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',
+    }) : hasFkBlackLoyalty && jsx(LoyaltyChip, {
+      icon: fkBlackLoyaltyChipData.icon,
+      borderGradient: fkBlackLoyaltyChipData.borderGradient,
+      backgroundGradient: fkBlackLoyaltyChipData.backgroundGradient,
+      chevronFillColor: fkBlackLoyaltyChipData.chevronFillColor || '#FFF',
       handleChipClick: loyaltyChipClick
     }), superCoinsLoading ? jsx(Container, {
       width: '50px',
@@ -1031,6 +1464,77 @@ var RewardsSection = function () {
   }));
 };
 
+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 = useTheme();
+  if (!isEliteAccountActive(metaData)) {
+    return null;
+  }
+  var isExpiringSoon = metaData.displayStatus === DISPLAY_STATUS.EXPIRING_SOON;
+  return jsx(Container, __assign({
+    css: eliteStatusBadgeStyles(theme, isExpiringSoon)
+  }, {
+    children: jsx(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 = useTheme();
+  var triggerRavenEvent = useEliteRaven().triggerRavenEvent;
+  var redirectionUrl = metaData.redirectionUrl;
+  var _b = useMemo(function () {
+      return getAccountEliteStripText(metaData);
+    }, [metaData]),
+    prefix = _b.prefix,
+    suffix = _b.suffix;
+  var handleStripClick = useCallback(function () {
+    if (!redirectionUrl) {
+      return;
+    }
+    triggerRavenEvent(RAVEN_EVENTS.UI_ACTION, {
+      action_name: RAVEN_ACTIONS.CT_LOYALTY_VIEW_BENEFITS_CLICK
+    });
+    redirectToEliteUrl(redirectionUrl);
+  }, [redirectionUrl, triggerRavenEvent]);
+  return jsxs(Container, __assign({
+    className: "account-elite-section ".concat(redirectionUrl ? 'c-pointer' : ''),
+    css: getAccountEliteSectionStyles(theme),
+    onClick: handleStripClick
+  }, {
+    children: [jsxs(Typography, __assign({
+      variant: 'B2',
+      className: 'flex'
+    }, {
+      children: [prefix, " ", jsx(EliteText, {
+        className: 'elite-txt-svg',
+        style: getEliteTxtSvgStyles(theme)
+      }), " ", suffix, ' ', redirectionUrl && jsx(HeaderChevronRight, {
+        width: 20,
+        height: 20
+      })]
+    })), jsx(EliteStatusBadge, {
+      metaData: metaData
+    })]
+  }));
+};
+
 var AccountDropdownContent = function (_a) {
   var isOpen = _a.isOpen;
   var _b = useHeaderContext(),
@@ -1040,21 +1544,25 @@ var AccountDropdownContent = function (_a) {
     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 = useMemo(function () {
+  var _e = 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 {
@@ -1127,12 +1635,18 @@ var AccountDropdownContent = function (_a) {
     width: "".concat(ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px"),
     background: '#FFF1EC'
   }, {
-    children: [jsx(Container, __assign({
-      padding: '16px',
-      height: '76px'
+    children: [jsxs(Container, __assign({
+      css: getAccountUnlockedBgStyles(isEliteAccountActive(eliteMetadata), EliteAccountStripBg)
     }, {
-      children: renderUserData()
-    })), jsx(RewardsSection, {}), jsxs(Container, __assign({
+      children: [jsx(Container, __assign({
+        padding: '16px',
+        height: '76px'
+      }, {
+        children: renderUserData()
+      })), jsx(RewardsSection, {})]
+    })), hasEliteLoyaltyDetails(eliteDetails) && eliteMetadata && !hideEliteRedirectionCTA && jsx(AccountEliteStrip, {
+      metaData: eliteMetadata
+    }), jsxs(Container, __assign({
       display: 'flex',
       flexDirection: 'column',
       padding: '8px',
@@ -1320,16 +1834,19 @@ var HeaderContent = function () {
     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 = useState(false),
-    scrolled = _f[0],
-    setScrolled = _f[1];
+    ravenEventName = _b.ravenEventName,
+    _f = _b.hideNavbar,
+    hideNavbar = _f === void 0 ? false : _f;
+  var _g = useState(false),
+    scrolled = _g[0],
+    setScrolled = _g[1];
   useEffect(function () {
     var handleScroll = function () {
       setScrolled(window.scrollY >= 50);
@@ -1346,15 +1863,15 @@ var HeaderContent = function () {
     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 = useCallback(function (actionName, actionType) {
     return {
@@ -1365,8 +1882,9 @@ var HeaderContent = function () {
     };
   }, [utmSource, loyaltyType]);
   var handleNavbarOptionsClick = 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;
@@ -1378,7 +1896,8 @@ var HeaderContent = function () {
     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 _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]);
@@ -1432,7 +1951,7 @@ var HeaderContent = function () {
           }), jsx(Fkcompany, {
             color: fkcompanyColor
           })]
-        })), jsxs(Container, __assign({
+        })), !hideNavbar && jsxs(Container, __assign({
           display: 'flex',
           flexDirection: 'row',
           alignItems: 'center',
@@ -1452,11 +1971,16 @@ var HeaderContent = function () {
                 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 jsxs(Container, {
-                children: [jsxs(Container, __assign({
+                children: [jsx(Container, __assign({
                   onMouseEnter: function () {
                     handleOnMouseEnter(index);
-                    if (option.isHoverable) {
+                    if (option.isHoverable && !isEliteNavOption) {
                       triggerRavenEventOnHover(option);
                     }
                   },
@@ -1464,7 +1988,7 @@ var HeaderContent = function () {
                   display: 'flex',
                   flexDirection: 'row',
                   alignItems: 'center',
-                  padding: '8px 12px 8px 12px',
+                  padding: isEliteNavOption ? '' : '8px 12px 8px 12px',
                   cursor: 'pointer',
                   position: 'relative',
                   columnGap: 8,
@@ -1473,37 +1997,45 @@ var HeaderContent = 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: isEliteNavOption ? jsx(EliteLoyaltyPill, {
+                    state: getElitePillState(eliteDetails, isUserLoggedIn),
+                    animate: true,
+                    onHover: function () {}
+                  }) : jsxs(Fragment, {
+                    children: [LeftIcon && jsx(LeftIcon, {
+                      color: isHovered ? hoverColor : typographyColor
+                    }), jsxs(Container, __assign({
+                      display: 'flex',
+                      flexDirection: 'row',
+                      alignItems: 'center'
                     }, {
-                      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,
+                      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
+                      })]
+                    }))]
+                  })
+                })), jsx(HeaderAnimatedMask, __assign({
+                  show: isDropdownOpen,
                   marginTop: '64px',
                   handleDropdownMouseEnter: handleDropdownMouseEnter,
                   handleDropdownMouseLeave: handleDropdownMouseLeave,
                   onMaskClick: handleDropdownMouseLeave
                 }, {
-                  children: jsx(BusinessDropdownContent, {
-                    isOpen: hoveredElemIndex === index && isHoverable && isDropdownVisible
+                  children: isEliteNavOption ? jsx(EliteDropDownContent, {
+                    isOpen: isDropdownOpen
+                  }) : jsx(BusinessDropdownContent, {
+                    isOpen: isDropdownOpen
                   })
                 }))]
-              });
+              }, "nav-option-".concat(index));
             })
           })), isUserLoggedIn && jsx(Divider, {
             css: {
@@ -1520,7 +2052,9 @@ var HeaderContent = function () {
             }, {
               children: jsx(UserAccount, {})
             })) : jsx(Button, __assign({
-              onClick: onLoginButtonClick,
+              onClick: function () {
+                return onLoginButtonClick();
+              },
               css: __assign({
                 width: 153,
                 height: 40