@cleartrip/ct-design-header 1.2.0-SNAPSHOT-header-v0.8.0 → 1.2.0-SNAPSHOT-header-v0.9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
2
- 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('@cleartrip/ct-design-shimmer')) :
3
- 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', '@cleartrip/ct-design-shimmer'], factory) :
4
- (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.ctDesignShimmer));
5
- })(this, (function (exports, jsxRuntime, react, ctDesignContainer, ctDesignTypography, ctDesignButton, ctDesignDivider, ctDesignIcons, ctDesignShimmer) { 'use strict';
2
+ 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')) :
3
+ 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'], factory) :
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemHeader = {}, global.jsxRuntime, global.React, global.ctDesignContainer, global.ctDesignTypography, global.ctDesignButton, global.ctDesignDivider, global.ctDesignIcons));
5
+ })(this, (function (exports, jsxRuntime, react, ctDesignContainer, ctDesignTypography, ctDesignButton, ctDesignDivider, ctDesignIcons) { 'use strict';
6
6
 
7
7
  /******************************************************************************
8
8
  Copyright (c) Microsoft Corporation.
@@ -50,27 +50,23 @@
50
50
  var NAVBAR_OPTIONS = [{
51
51
  lefticon: ctDesignIcons.Offers,
52
52
  text: 'Offers',
53
- ravenActionName: 'offers',
54
53
  isHoverable: false,
55
54
  isClickable: true,
56
55
  link: OFFERS_URL
57
56
  }, {
58
57
  lefticon: ctDesignIcons.BusinessBag,
59
58
  text: 'Business',
60
- ravenActionName: 'business',
61
59
  rightIcon: ctDesignIcons.ChevronDown,
62
60
  isHoverable: true
63
61
  }, {
64
62
  lefticon: ctDesignIcons.MyTrips,
65
63
  text: 'My Trips',
66
- ravenActionName: 'mytrips',
67
64
  isHoverable: false,
68
65
  isClickable: true,
69
66
  link: MY_TRIPS_URL
70
67
  }, {
71
68
  lefticon: ctDesignIcons.SupportIcon,
72
69
  text: 'Support',
73
- ravenActionName: 'support',
74
70
  isHoverable: false,
75
71
  isClickable: true,
76
72
  link: SUPPORT_URL
@@ -84,36 +80,33 @@
84
80
  };
85
81
  var LOB_DATA = [{
86
82
  title: LOBS.FLIGHTS,
87
- image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Flights.png?cache=true',
83
+ image: 'https://rukmini-ct.flixcart.com/f_auto,w_48,h_48,dpr_2/offermgmt-prod/offermgmt/images/banner/flight_uhp.png?cache=true',
88
84
  link: '/flights'
89
85
  }, {
90
86
  title: LOBS.HOTELS,
91
- image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Hotels.png?cache=true',
87
+ image: 'https://rukmini-ct.flixcart.com/f_auto,w_48,h_48,dpr_2/offermgmt-prod/offermgmt/images/banner/hotel_uhp.png?cache=true',
92
88
  link: '/hotels'
93
89
  }, {
94
90
  title: LOBS.BUSES,
95
- image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Buses.png?cache=true',
91
+ image: 'https://rukmini-ct.flixcart.com/f_auto,w_40,h_40,dpr_2/offermgmt-prod/offermgmt/images/banner/bus_uhp.png?cache=true',
96
92
  link: '/bus'
97
93
  }, {
98
94
  title: LOBS.TRAIN,
99
- image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Trains.png?cache=true',
95
+ image: 'https://rukmini-ct.flixcart.com/f_auto,w_40,h_40,dpr_2/offermgmt-prod/offermgmt/images/banner/train_uhp.png?cache=true',
100
96
  link: '/pages/trains/appOnly'
101
97
  }, {
102
98
  title: LOBS.PACKAGES,
103
- image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Packages.png?cache=true',
99
+ image: 'https://rukmini-ct.flixcart.com/f_auto,w_40,h_40,dpr_2/offermgmt-prod/offermgmt/images/banner/holiday_uhp.png?cache=true',
104
100
  link: '/holidays'
105
101
  }];
106
102
  var bdConfig = [{
107
103
  title: 'AgentBox',
108
104
  subtitle: 'For travel agents',
109
- details: 'One-stop travel solution offering the best deals to our travel agency partners',
110
- link: 'https://agency.cleartrip.com'
105
+ details: 'One-stop travel solution offering the best deals to our travel agency partners'
111
106
  }, {
112
107
  title: 'OutOfOffice',
113
108
  subtitle: 'For startups, corporates and SMEs',
114
- details: 'Manage corporate business travel, smartly',
115
- link: 'https://ooo.cleartrip.com/',
116
- ravenActionName: 'ooo'
109
+ details: 'Manage corporate business travel, smartly'
117
110
  }, {
118
111
  title: 'MICE',
119
112
  subtitle: 'For corporate events',
@@ -126,35 +119,16 @@
126
119
  link: 'https://business.cleartrip.com/api-customers/more-details'
127
120
  }];
128
121
  var BUSINESS_DROPDOWN_HEADING = 'Other business services';
129
- exports.RAVEN_PAGE_NAMES = void 0;
122
+ var RAVEN_PAGE_NAMES;
130
123
  (function (RAVEN_PAGE_NAMES) {
131
124
  RAVEN_PAGE_NAMES["UNIFIED_HOME"] = "unified_homepage";
132
- RAVEN_PAGE_NAMES["HOTELS_HOME"] = "hotel_home";
133
- RAVEN_PAGE_NAMES["FLIGHTS_HOME"] = "flights_home";
134
- })(exports.RAVEN_PAGE_NAMES || (exports.RAVEN_PAGE_NAMES = {}));
125
+ RAVEN_PAGE_NAMES["HOTELS_HOME"] = "hotels_homepage";
126
+ RAVEN_PAGE_NAMES["FLIGHTS_HOME"] = "flights_homepage";
127
+ })(RAVEN_PAGE_NAMES || (RAVEN_PAGE_NAMES = {}));
135
128
  var RAVEN_PLATFORMS;
136
129
  (function (RAVEN_PLATFORMS) {
137
130
  RAVEN_PLATFORMS["DESKTOP"] = "desktop";
138
131
  })(RAVEN_PLATFORMS || (RAVEN_PLATFORMS = {}));
139
- var LOG_IN_TEXT = 'Log in';
140
- var THEME_CONFIG = {
141
- NOVAC: {
142
- headerBackground: 'transparent',
143
- hoverColor: '#FDBA12',
144
- logoFill: '#FFF',
145
- fkcompanyColor: '#FFF',
146
- typographyColor: '#FFF',
147
- loginButtonColorVariant: ctDesignButton.ButtonColor.NEUTRAL
148
- },
149
- DEFAULT: {
150
- headerBackground: '#FFFFFF',
151
- hoverColor: '#FF4F17',
152
- logoFill: '#FF4F17',
153
- fkcompanyColor: '#1A1A1A',
154
- typographyColor: '#1A1A1A',
155
- loginButtonColorVariant: ctDesignButton.ButtonColor.PRIMARY
156
- }
157
- };
158
132
 
159
133
  var HeaderContext = react.createContext(undefined);
160
134
  var useHeaderContext = function () {
@@ -181,54 +155,44 @@
181
155
  alignItems: 'center',
182
156
  justifyContent: 'center',
183
157
  padding: '16px',
184
- background: '#F7FAFF',
158
+ height: '64',
159
+ background: '#F3F5FA',
185
160
  top: '64px',
186
161
  zIndex: 2,
187
162
  css: {
188
- gap: 24
163
+ gap: 40
189
164
  }
190
165
  }, {
191
166
  children: LOB_DATA.map(function (item, index) {
192
- var title = item.title,
193
- link = item.link,
194
- image = item.image;
195
- var isSelected = selectedLOB === title;
196
- return jsxRuntime.jsx("a", __assign({
197
- href: isSelected ? undefined : link,
198
- style: {
199
- textDecoration: 'none',
200
- pointerEvents: isSelected ? 'none' : 'auto'
167
+ return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
168
+ display: 'flex',
169
+ alignItems: 'center',
170
+ cursor: 'pointer',
171
+ css: {
172
+ gap: 8,
173
+ background: selectedLOB === item.title ? '#FFFFFF' : 'transparent',
174
+ borderRadius: selectedLOB === item.title ? '40px' : '0',
175
+ padding: selectedLOB === item.title ? '8px 16px 8px 8px' : '0'
176
+ },
177
+ onClick: function () {
178
+ window.location.href = item.link;
201
179
  }
202
180
  }, {
203
- children: jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
204
- display: 'flex',
205
- alignItems: 'center',
206
- width: '116px',
207
- height: '48px',
208
- justifyContent: 'center',
209
- cursor: 'pointer',
210
- css: {
211
- gap: 8,
212
- background: isSelected ? '#FFFFFF' : 'transparent',
213
- border: isSelected ? '1px solid #E6E6E6' : '',
214
- borderRadius: '40px',
215
- padding: '8px 16px 8px 8px',
216
- transition: 'background 0.2s ease'
217
- }
181
+ children: [jsxRuntime.jsx("img", {
182
+ src: item.image,
183
+ alt: item.title,
184
+ width: 32,
185
+ height: 32
186
+ }), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
187
+ variant: 'P1',
188
+ style: {
189
+ fontWeight: selectedLOB === item.title ? 600 : 500
190
+ },
191
+ isClickable: true
218
192
  }, {
219
- children: [jsxRuntime.jsx("img", {
220
- src: image,
221
- alt: title,
222
- width: 32,
223
- height: 32
224
- }), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
225
- variant: isSelected ? ctDesignTypography.TypographyVariant.HM3 : ctDesignTypography.TypographyVariant.B1,
226
- isClickable: true
227
- }, {
228
- children: title
229
- }))]
230
- }), index)
231
- }));
193
+ children: item.title
194
+ }))]
195
+ }), index);
232
196
  })
233
197
  }));
234
198
  };
@@ -427,85 +391,11 @@
427
391
  };
428
392
  };
429
393
 
430
- var stringifyPayload = function (payload) {
431
- var keys = Object.keys(payload);
432
- var numericValues = [];
433
- keys.forEach(function (key) {
434
- if (numericValues.includes(key)) {
435
- payload[key] = Number(payload[key]);
436
- } else {
437
- payload[key] = '' + payload[key];
438
- }
439
- });
440
- return payload;
441
- };
442
- var isServer = function () {
443
- return typeof window === 'undefined' || !window;
444
- };
445
- var getQueryParam = function (queryParam) {
446
- if (isServer()) {
447
- return '';
448
- }
449
- var urlParams = new URLSearchParams(window.location.search);
450
- return urlParams.get(queryParam);
451
- };
452
- var ravenLoyaltyTypes = function (loyaltyType) {
453
- switch (loyaltyType) {
454
- case 'FkVip':
455
- return 'fk_vip';
456
- case 'FkPremium':
457
- return 'fk_plus_premium';
458
- case 'InsiderIcon':
459
- return 'myntra_insidericon';
460
- case 'InsiderElite':
461
- return 'myntra_insiderelite';
462
- default:
463
- return '';
464
- }
465
- };
466
- var ravenSDKTrigger = function (isUserLoggedIn, eventName, ravenPayload, customRavenPayload, ravenPushCallback, pageName) {
467
- var _a;
468
- if (typeof ravenPushCallback !== 'function') {
469
- console.error('ravenPushCallback is not provided or is not a function');
470
- return;
471
- }
472
- var commonPayload = {
473
- page_name: pageName,
474
- platform: RAVEN_PLATFORMS.DESKTOP,
475
- login_status: isUserLoggedIn ? 'yes' : 'no',
476
- domain: (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.host
477
- };
478
- var newRavenPayload = stringifyPayload(ravenPayload);
479
- var parsedCustomRavenPayload = stringifyPayload(customRavenPayload);
480
- var finalPayload = __assign(__assign(__assign({}, commonPayload), newRavenPayload), parsedCustomRavenPayload);
481
- try {
482
- if (ravenPushCallback.length === 1) {
483
- ravenPushCallback({
484
- eventName: eventName,
485
- eventData: finalPayload
486
- });
487
- } else {
488
- ravenPushCallback(eventName, finalPayload);
489
- }
490
- } catch (err) {
491
- console.error(err);
492
- return;
493
- }
494
- };
495
-
496
394
  var BusinessDropdownContent = function (_a) {
497
395
  var isOpen = _a.isOpen;
498
- var _b = useHeaderContext(),
499
- isUserLoggedIn = _b.isUserLoggedIn,
500
- ravenPushCallback = _b.ravenPushCallback,
501
- ravenPageName = _b.ravenPageName,
502
- ravenEventName = _b.ravenEventName,
503
- loyaltyType = _b.loyaltyType,
504
- _c = _b.ravenPayload,
505
- ravenPayload = _c === void 0 ? {} : _c;
506
- var _d = react.useState(0),
507
- leftPosition = _d[0],
508
- setLeftPosition = _d[1];
396
+ var _b = react.useState(0),
397
+ leftPosition = _b[0],
398
+ setLeftPosition = _b[1];
509
399
  var containerRef = useDropdownAnimation(isOpen).containerRef;
510
400
  react.useEffect(function () {
511
401
  var updatePosition = function () {
@@ -524,21 +414,6 @@
524
414
  return window.removeEventListener('resize', updatePosition);
525
415
  };
526
416
  }, [containerRef, leftPosition]);
527
- var handleBusinessDropdownClick = react.useCallback(function (link, title, ravenActionName) {
528
- var _a;
529
- var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
530
- var actionName = ravenActionName ? "".concat(ravenActionName, "_business_click") : title ? "".concat(title.toLowerCase(), "_business_click") : '';
531
- var defaultPayload = {
532
- action_name: actionName,
533
- action_type: 'click',
534
- u_utm_source: utmSource,
535
- loyalty_type: ravenLoyaltyTypes(loyaltyType)
536
- };
537
- if (link) {
538
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
539
- window.location.href = link;
540
- }
541
- }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, loyaltyType]);
542
417
  return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
543
418
  ref: containerRef,
544
419
  backgroundColor: '#fff',
@@ -559,7 +434,10 @@
559
434
  backgroundColor: '#FFF1EC'
560
435
  }, {
561
436
  children: jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
562
- variant: 'HM2'
437
+ variant: 'HM2',
438
+ css: {
439
+ lineHeight: '24px'
440
+ }
563
441
  }, {
564
442
  children: BUSINESS_DROPDOWN_HEADING
565
443
  }))
@@ -573,46 +451,32 @@
573
451
  children: bdConfig.map(function (_a) {
574
452
  var title = _a.title,
575
453
  subtitle = _a.subtitle,
576
- details = _a.details,
577
- link = _a.link,
578
- ravenActionName = _a.ravenActionName;
454
+ details = _a.details;
579
455
  return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
580
456
  cursor: 'pointer',
581
- display: 'flex',
582
- flexDirection: 'column',
583
457
  width: '200px',
584
- rowGap: '11px',
585
- className: 'bd-hover-container',
586
- onClick: function () {
587
- return handleBusinessDropdownClick(link, title, ravenActionName);
588
- }
458
+ className: 'bd-hover-container'
589
459
  }, {
590
460
  children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
591
461
  display: 'flex',
592
- flexDirection: 'column',
593
- rowGap: '4px'
462
+ flexDirection: 'row',
463
+ alignItems: 'center',
464
+ columnGap: '8px'
594
465
  }, {
595
- children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
596
- display: 'flex',
597
- flexDirection: 'row',
598
- alignItems: 'center',
599
- columnGap: '8px'
466
+ children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
467
+ variant: 'HM2',
468
+ className: 'color-orange-on-hover'
600
469
  }, {
601
- children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
602
- variant: 'HM2',
603
- className: 'color-orange-on-hover'
604
- }, {
605
- children: title
606
- })), jsxRuntime.jsx(AnimatedArrow, {})]
607
- })), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
608
- variant: 'B3',
609
- css: {
610
- marginTop: '4px',
611
- opacity: 0.75
612
- }
613
- }, {
614
- children: subtitle
615
- }))]
470
+ children: title
471
+ })), jsxRuntime.jsx(AnimatedArrow, {})]
472
+ })), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
473
+ variant: 'B3',
474
+ css: {
475
+ marginTop: '4px',
476
+ opacity: 0.75
477
+ }
478
+ }, {
479
+ children: subtitle
616
480
  })), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
617
481
  variant: 'P3',
618
482
  color: 'subheading',
@@ -690,7 +554,6 @@
690
554
  redirectionLink: 'accounts/personal-data-dashboard'
691
555
  }];
692
556
  var SIGN_OUT_TEXT = 'Logout';
693
- var MY_ACCOUNT_TEXT = 'My Account';
694
557
  var LOGGEDIN_USER_TEXT = 'You are logged in with';
695
558
  var HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID = 'header-acc-btn';
696
559
  var ACCOUNT_OPTIONS_CONTAINER_ID = 'account-options';
@@ -702,33 +565,13 @@
702
565
  backgroundGradient = _a.backgroundGradient,
703
566
  handleChipClick = _a.handleChipClick,
704
567
  chevronFillColor = _a.chevronFillColor;
705
- var _b = useHeaderContext(),
706
- loyaltyType = _b.loyaltyType,
707
- isUserLoggedIn = _b.isUserLoggedIn,
708
- ravenPushCallback = _b.ravenPushCallback,
709
- ravenPageName = _b.ravenPageName,
710
- _c = _b.ravenPayload,
711
- ravenPayload = _c === void 0 ? {} : _c,
712
- ravenEventName = _b.ravenEventName;
713
- var _d = react.useState(false),
714
- isHovered = _d[0],
715
- setIsHovered = _d[1];
716
- var handleClick = react.useCallback(function () {
717
- var _a;
718
- if (handleChipClick) {
719
- handleChipClick();
720
- } else {
721
- var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
722
- var defaultPayload = {
723
- action_name: "loyalty_account_click",
724
- action_type: 'click',
725
- u_utm_source: utmSource,
726
- loyaltyType: ravenLoyaltyTypes(loyaltyType)
727
- };
728
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
729
- window.location.href = '/all-offers/loyalty-october';
730
- }
731
- }, [handleChipClick, loyaltyType, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
568
+ var _b = react.useState(false),
569
+ isHovered = _b[0],
570
+ setIsHovered = _b[1];
571
+ var handleClick = function () {
572
+ window.location.href = '/';
573
+ handleChipClick && handleChipClick();
574
+ };
732
575
  return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
733
576
  display: 'flex',
734
577
  position: 'relative',
@@ -753,7 +596,7 @@
753
596
  onClick: handleClick
754
597
  }, {
755
598
  children: [jsxRuntime.jsx(ctDesignContainer.Container, {
756
- css: {
599
+ style: {
757
600
  content: '""',
758
601
  position: 'absolute',
759
602
  inset: 0,
@@ -762,7 +605,7 @@
762
605
  zIndex: -2
763
606
  }
764
607
  }), jsxRuntime.jsx(ctDesignContainer.Container, {
765
- css: {
608
+ style: {
766
609
  content: '""',
767
610
  position: 'absolute',
768
611
  inset: 0,
@@ -783,7 +626,7 @@
783
626
  })), jsxRuntime.jsx(ctDesignContainer.Container, __assign({
784
627
  display: 'flex',
785
628
  alignItems: 'center',
786
- css: {
629
+ style: {
787
630
  overflow: 'hidden',
788
631
  maxWidth: isHovered ? 16 : 0,
789
632
  transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
@@ -848,46 +691,24 @@
848
691
  handleChipClick = _a.handleChipClick,
849
692
  value = _a.value,
850
693
  type = _a.type;
851
- var _b = useHeaderContext(),
852
- loyaltyType = _b.loyaltyType,
853
- isUserLoggedIn = _b.isUserLoggedIn,
854
- ravenPushCallback = _b.ravenPushCallback,
855
- ravenPageName = _b.ravenPageName,
856
- ravenEventName = _b.ravenEventName,
857
- _c = _b.ravenPayload,
858
- ravenPayload = _c === void 0 ? {} : _c;
859
- var _d = react.useState(false),
860
- isHovered = _d[0],
861
- setIsHovered = _d[1];
862
- var handleDefaultClick = react.useCallback(function () {
863
- var _a;
864
- if (handleChipClick) {
865
- handleChipClick();
866
- } else {
867
- var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
868
- var defaultPayload = {
869
- action_name: "".concat(type, "_account_click"),
870
- action_type: 'click',
871
- u_utm_source: utmSource,
872
- loyaltyType: ravenLoyaltyTypes(loyaltyType)
873
- };
874
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
875
- var redirectUrls = {
876
- supercoin: '/all-offers/supercoins/',
877
- wallet: '/accounts/wallet'
878
- };
879
- if (redirectUrls[type]) {
880
- window.location.href = redirectUrls[type];
881
- }
694
+ var _b = react.useState(false),
695
+ isHovered = _b[0],
696
+ setIsHovered = _b[1];
697
+ var handleDefaultClick = function () {
698
+ if (type === 'supercoins') {
699
+ window.location.href = '/supercoins';
700
+ } else if (type === 'wallet') {
701
+ window.location.href = '/wallet';
882
702
  }
883
- }, [handleChipClick, type, loyaltyType, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
703
+ handleChipClick && handleChipClick();
704
+ };
884
705
  return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
885
706
  display: 'flex',
886
707
  alignItems: 'center',
887
708
  justifyContent: 'center',
888
709
  borderRadius: '8px',
889
710
  cursor: 'pointer',
890
- css: {
711
+ style: {
891
712
  height: 32,
892
713
  paddingLeft: 8,
893
714
  paddingRight: isHovered ? 4 : 8,
@@ -918,7 +739,7 @@
918
739
  })), jsxRuntime.jsx(ctDesignContainer.Container, __assign({
919
740
  display: 'flex',
920
741
  alignItems: 'center',
921
- css: {
742
+ style: {
922
743
  overflow: 'hidden',
923
744
  maxWidth: isHovered ? 16 : 0,
924
745
  transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
@@ -946,12 +767,6 @@
946
767
  hideWalletChip = _b.hideWalletChip,
947
768
  hideSupercoinsChip = _b.hideSupercoinsChip,
948
769
  hideLoyaltyChip = _b.hideLoyaltyChip;
949
- var shouldShowLoyalty = loyaltyLoading || selectedLoyaltyType && LOYALTY_DATA[selectedLoyaltyType] && !hideLoyaltyChip;
950
- var shouldShowSupercoin = superCoinsLoading || !hideSupercoinsChip;
951
- var shouldShowWallet = walletLoading || !hideWalletChip;
952
- if (!shouldShowLoyalty && !shouldShowSupercoin && !shouldShowWallet) {
953
- return null;
954
- }
955
770
  return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
956
771
  display: 'flex',
957
772
  padding: '0 16px 16px 16px',
@@ -961,20 +776,22 @@
961
776
  gap: '4px'
962
777
  }
963
778
  }, {
964
- children: [loyaltyLoading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
779
+ children: [loyaltyLoading ? jsxRuntime.jsx(ctDesignContainer.Container, {
965
780
  width: '50px',
966
781
  height: '32px',
967
- borderRadius: '8px'
782
+ borderRadius: '8px',
783
+ backgroundColor: '#efefef'
968
784
  }) : selectedLoyaltyType && LOYALTY_DATA[selectedLoyaltyType] && !hideLoyaltyChip && jsxRuntime.jsx(LoyaltyChip, {
969
785
  icon: LOYALTY_DATA[selectedLoyaltyType].icon,
970
786
  borderGradient: LOYALTY_DATA[selectedLoyaltyType].borderGradient,
971
787
  backgroundGradient: LOYALTY_DATA[selectedLoyaltyType].backgroundGradient,
972
788
  chevronFillColor: ((_a = LOYALTY_DATA[selectedLoyaltyType]) === null || _a === void 0 ? void 0 : _a.chevronFillColor) || '#FFF',
973
789
  handleChipClick: loyaltyChipClick
974
- }), superCoinsLoading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
790
+ }), superCoinsLoading ? jsxRuntime.jsx(ctDesignContainer.Container, {
975
791
  width: '50px',
976
792
  height: '32px',
977
- borderRadius: '8px'
793
+ borderRadius: '8px',
794
+ backgroundColor: '#efefef'
978
795
  }) : !hideSupercoinsChip && jsxRuntime.jsx(ExpandableItem, {
979
796
  icon: jsxRuntime.jsx(ctDesignIcons.Supercoin, {
980
797
  width: 20,
@@ -982,11 +799,12 @@
982
799
  }),
983
800
  value: superCoinBalance,
984
801
  handleChipClick: supercoinsChipClick,
985
- type: 'supercoin'
986
- }), walletLoading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
802
+ type: 'supercoins'
803
+ }), walletLoading ? jsxRuntime.jsx(ctDesignContainer.Container, {
987
804
  width: '50px',
988
805
  height: '32px',
989
- borderRadius: '8px'
806
+ borderRadius: '8px',
807
+ backgroundColor: '#efefef'
990
808
  }) : !hideWalletChip && jsxRuntime.jsx(ExpandableItem, {
991
809
  icon: jsxRuntime.jsx(ctDesignIcons.Wallet, {
992
810
  width: 20,
@@ -1006,60 +824,45 @@
1006
824
  userName = _b.userName,
1007
825
  userMobileNumber = _b.userMobileNumber,
1008
826
  countryCode = _b.countryCode,
1009
- userDetailsLoading = _b.userDetailsLoading,
1010
- loyaltyType = _b.loyaltyType,
1011
- isUserLoggedIn = _b.isUserLoggedIn,
1012
- ravenEventName = _b.ravenEventName,
1013
- ravenPageName = _b.ravenPageName,
1014
- _c = _b.ravenPayload,
1015
- ravenPayload = _c === void 0 ? {} : _c,
1016
- ravenPushCallback = _b.ravenPushCallback;
827
+ userDetailsLoading = _b.userDetailsLoading;
1017
828
  var containerRef = useDropdownAnimation(isOpen).containerRef;
1018
- var _d = react.useMemo(function () {
829
+ var _c = react.useMemo(function () {
830
+ var userGreeting = userName && "Hello ".concat(userName, "!");
831
+ var phoneNumber = countryCode && userMobileNumber ? "".concat(countryCode, " ").concat(userMobileNumber) : '';
1019
832
  return {
1020
- userGreeting: userName ? "Hello ".concat(userName, "!") : '',
1021
- phoneNumber: countryCode && userMobileNumber ? "".concat(countryCode, " ").concat(userMobileNumber) : ''
833
+ userGreeting: userGreeting,
834
+ phoneNumber: phoneNumber
1022
835
  };
1023
836
  }, [userName, userMobileNumber, countryCode]),
1024
- userGreeting = _d.userGreeting,
1025
- phoneNumber = _d.phoneNumber;
1026
- var generateRavenPayload = function (actionName) {
1027
- var _a;
1028
- return {
1029
- action_name: actionName.toLowerCase().replace(/[\s-]/g, '') + '_account_click',
1030
- action_type: 'click',
1031
- u_utm_source: (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic',
1032
- loyalty_type: ravenLoyaltyTypes(loyaltyType)
837
+ userGreeting = _c.userGreeting,
838
+ phoneNumber = _c.phoneNumber;
839
+ var handleRedirectClick = function (redirectLink) {
840
+ return function () {
841
+ window.location.href = redirectLink;
1033
842
  };
1034
843
  };
1035
- var handleAccountOptionsClick = react.useCallback(function (text, redirectLink) {
1036
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, generateRavenPayload(text), ravenPayload, ravenPushCallback, ravenPageName);
1037
- window.location.href = redirectLink;
1038
- }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
1039
- react.useCallback(function () {
1040
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, generateRavenPayload(SIGN_OUT_TEXT), ravenPayload, ravenPushCallback, ravenPageName);
1041
- handleLogoutClick();
1042
- }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, handleLogoutClick]);
1043
- var positionAccountOptionsDiv = react.useCallback(function () {
844
+ react.useEffect(function () {
1044
845
  var headerAccBtn = document.getElementById(HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID);
1045
846
  var accountOptionsElem = document.getElementById(ACCOUNT_OPTIONS_CONTAINER_ID);
1046
- if (headerAccBtn && accountOptionsElem) {
1047
- var headerBtnRight = headerAccBtn.getBoundingClientRect().right;
1048
- accountOptionsElem.style.left = "".concat(headerBtnRight - ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px");
1049
- }
1050
- }, []);
1051
- react.useEffect(function () {
847
+ var positionAccountOptionsDiv = function () {
848
+ var headerBtnRight = headerAccBtn === null || headerAccBtn === void 0 ? void 0 : headerAccBtn.getBoundingClientRect().right;
849
+ if (accountOptionsElem && headerBtnRight) {
850
+ accountOptionsElem.style.left = "".concat(headerBtnRight - ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px");
851
+ }
852
+ };
1052
853
  positionAccountOptionsDiv();
1053
- }, [positionAccountOptionsDiv]);
854
+ }, []);
1054
855
  var renderUserData = function () {
1055
856
  var renderContent = function (loading, content, variant, color) {
1056
857
  return jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
1057
858
  variant: variant,
1058
859
  color: color
1059
860
  }, {
1060
- children: loading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
861
+ children: loading ? jsxRuntime.jsx(ctDesignContainer.Container, {
1061
862
  height: variant === 'HM3' ? '18px' : '12px',
1062
- width: variant === 'HM3' ? '140px' : '200px'
863
+ width: variant === 'HM3' ? '140px' : '200px',
864
+ backgroundColor: '#efefef',
865
+ borderRadius: '8px'
1063
866
  }) : content
1064
867
  }));
1065
868
  };
@@ -1095,7 +898,7 @@
1095
898
  }, {
1096
899
  children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({
1097
900
  padding: '16px',
1098
- height: '76px'
901
+ height: '72px'
1099
902
  }, {
1100
903
  children: renderUserData()
1101
904
  })), jsxRuntime.jsx(RewardsSection, {}), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
@@ -1104,7 +907,7 @@
1104
907
  padding: '8px',
1105
908
  backgroundColor: 'white',
1106
909
  rowGap: '8px',
1107
- css: {
910
+ style: {
1108
911
  borderBottomLeftRadius: 12,
1109
912
  borderBottomRightRadius: 12
1110
913
  }
@@ -1118,14 +921,12 @@
1118
921
  padding: '8px',
1119
922
  borderRadius: '8px',
1120
923
  cursor: 'pointer',
1121
- onClick: function () {
1122
- return handleAccountOptionsClick(text, redirectionLink);
1123
- }
924
+ onClick: handleRedirectClick(redirectionLink)
1124
925
  }, {
1125
926
  children: jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
1126
927
  display: 'flex',
1127
928
  cursor: 'pointer',
1128
- css: {
929
+ style: {
1129
930
  columnGap: '8px'
1130
931
  }
1131
932
  }, {
@@ -1142,7 +943,7 @@
1142
943
  }))
1143
944
  }), "account-option-".concat(text));
1144
945
  }), jsxRuntime.jsx(ctDesignDivider.Divider, {
1145
- css: {
946
+ style: {
1146
947
  borderBottom: '1px dashed #E6E6E6'
1147
948
  }
1148
949
  }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
@@ -1173,49 +974,29 @@
1173
974
  };
1174
975
 
1175
976
  var UserAccount = function () {
1176
- var _a = useHeaderContext(),
1177
- isNovacThemeEnabled = _a.isNovacThemeEnabled,
1178
- ravenEventName = _a.ravenEventName,
1179
- _b = _a.ravenPayload,
1180
- ravenPayload = _b === void 0 ? {} : _b,
1181
- ravenPushCallback = _a.ravenPushCallback,
1182
- isUserLoggedIn = _a.isUserLoggedIn,
1183
- loyaltyType = _a.loyaltyType,
1184
- ravenPageName = _a.ravenPageName;
1185
- var _c = useHoverDropdown({
977
+ var isNovacThemeEnabled = useHeaderContext().isNovacThemeEnabled;
978
+ var _a = useHoverDropdown({
1186
979
  openDelay: 0
1187
980
  }),
1188
- isDropdownVisible = _c.isDropdownVisible,
1189
- handleOnMouseEnter = _c.handleOnMouseEnter,
1190
- handleOnMouseLeave = _c.handleOnMouseLeave,
1191
- handleDropdownMouseEnter = _c.handleDropdownMouseEnter,
1192
- handleDropdownMouseLeave = _c.handleDropdownMouseLeave;
1193
- var _d = react.useState(false),
1194
- scrolled = _d[0],
1195
- setScrolled = _d[1];
981
+ isDropdownVisible = _a.isDropdownVisible,
982
+ handleOnMouseEnter = _a.handleOnMouseEnter,
983
+ handleOnMouseLeave = _a.handleOnMouseLeave,
984
+ handleDropdownMouseEnter = _a.handleDropdownMouseEnter,
985
+ handleDropdownMouseLeave = _a.handleDropdownMouseLeave;
986
+ var _b = react.useState(false),
987
+ scrolled = _b[0],
988
+ setScrolled = _b[1];
1196
989
  react.useEffect(function () {
1197
990
  var handleScroll = function () {
1198
- setScrolled(window.scrollY >= 50);
991
+ setScrolled(window.scrollY >= 100);
1199
992
  };
1200
993
  window.addEventListener('scroll', handleScroll);
1201
994
  return function () {
1202
995
  return window.removeEventListener('scroll', handleScroll);
1203
996
  };
1204
997
  }, []);
1205
- var theme = isNovacThemeEnabled && !scrolled ? THEME_CONFIG.NOVAC : THEME_CONFIG.DEFAULT;
1206
- var hoverColor = theme.hoverColor,
1207
- typographyColor = theme.typographyColor;
1208
- var triggerRavenEventOnHover = react.useCallback(function () {
1209
- var _a;
1210
- var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
1211
- var defaultPayload = {
1212
- action_name: "".concat(MY_ACCOUNT_TEXT.toLowerCase().replace(/[\s-]/g, ''), "_header_hover"),
1213
- action_type: 'hover',
1214
- u_utm_source: utmSource,
1215
- loyalty_type: ravenLoyaltyTypes(loyaltyType)
1216
- };
1217
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
1218
- }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, loyaltyType]);
998
+ var effectiveNovacThemeEnabled = isNovacThemeEnabled && !scrolled;
999
+ var hoverColor = effectiveNovacThemeEnabled ? '#FFB8A5' : '#FF4F17';
1219
1000
  return jsxRuntime.jsxs(ctDesignContainer.Container, {
1220
1001
  children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
1221
1002
  display: 'flex',
@@ -1224,19 +1005,18 @@
1224
1005
  borderRadius: '12px',
1225
1006
  height: '100%',
1226
1007
  cursor: 'pointer',
1227
- css: {
1008
+ style: {
1228
1009
  columnGap: 8,
1229
1010
  height: 64
1230
1011
  },
1231
1012
  onMouseEnter: function () {
1232
- handleOnMouseEnter(0);
1233
- triggerRavenEventOnHover();
1013
+ return handleOnMouseEnter(0);
1234
1014
  },
1235
1015
  onMouseLeave: handleOnMouseLeave,
1236
1016
  id: HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID
1237
1017
  }, {
1238
1018
  children: [jsxRuntime.jsx(ctDesignIcons.MyAccount, {
1239
- color: isDropdownVisible ? hoverColor : typographyColor
1019
+ color: isDropdownVisible ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
1240
1020
  }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
1241
1021
  display: 'flex',
1242
1022
  flexDirection: 'row',
@@ -1247,13 +1027,13 @@
1247
1027
  css: {
1248
1028
  cursor: 'pointer'
1249
1029
  },
1250
- colorCode: isDropdownVisible ? hoverColor : typographyColor
1030
+ colorCode: isDropdownVisible ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
1251
1031
  }, {
1252
- children: MY_ACCOUNT_TEXT
1032
+ children: "My Account"
1253
1033
  })), jsxRuntime.jsx(ctDesignIcons.ChevronDown, {
1254
1034
  width: 20,
1255
1035
  height: 20,
1256
- fill: isDropdownVisible ? hoverColor : typographyColor
1036
+ fill: isDropdownVisible ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
1257
1037
  })]
1258
1038
  }))]
1259
1039
  })), jsxRuntime.jsx(HeaderAnimatedMask, __assign({
@@ -1278,74 +1058,42 @@
1278
1058
  }));
1279
1059
  };
1280
1060
  var HeaderContent = function () {
1281
- var _a;
1282
- var _b = useHeaderContext(),
1283
- onLoginButtonClick = _b.onLoginButtonClick,
1284
- _c = _b.showAllLobs,
1285
- showAllLobs = _c === void 0 ? false : _c,
1286
- isUserLoggedIn = _b.isUserLoggedIn,
1287
- loyaltyType = _b.loyaltyType,
1288
- _d = _b.isNovacThemeEnabled,
1289
- isNovacThemeEnabled = _d === void 0 ? false : _d,
1290
- _e = _b.ravenPayload,
1291
- ravenPayload = _e === void 0 ? {} : _e,
1292
- ravenPushCallback = _b.ravenPushCallback,
1293
- ravenPageName = _b.ravenPageName,
1294
- ravenEventName = _b.ravenEventName;
1295
- var _f = react.useState(false),
1296
- scrolled = _f[0],
1297
- setScrolled = _f[1];
1061
+ var _a = useHeaderContext(),
1062
+ onLoginButtonClick = _a.onLoginButtonClick,
1063
+ _b = _a.showAllLobs,
1064
+ showAllLobs = _b === void 0 ? false : _b,
1065
+ isUserLoggedIn = _a.isUserLoggedIn;
1066
+ _a.loyaltyType;
1067
+ var _c = _a.isNovacThemeEnabled,
1068
+ isNovacThemeEnabled = _c === void 0 ? false : _c;
1069
+ _a.ravenPayload;
1070
+ _a.ravenPushCallback;
1071
+ _a.ravenPageName;
1072
+ _a.ravenEventName;
1073
+ var _e = react.useState(false),
1074
+ scrolled = _e[0],
1075
+ setScrolled = _e[1];
1298
1076
  react.useEffect(function () {
1299
1077
  var handleScroll = function () {
1300
- setScrolled(window.scrollY >= 50);
1078
+ setScrolled(window.scrollY >= 100);
1301
1079
  };
1302
1080
  window.addEventListener('scroll', handleScroll);
1303
1081
  return function () {
1304
1082
  return window.removeEventListener('scroll', handleScroll);
1305
1083
  };
1306
1084
  }, []);
1307
- var theme = isNovacThemeEnabled && !scrolled ? THEME_CONFIG.NOVAC : THEME_CONFIG.DEFAULT;
1308
- var headerBackground = theme.headerBackground,
1309
- logoFill = theme.logoFill,
1310
- hoverColor = theme.hoverColor,
1311
- fkcompanyColor = theme.fkcompanyColor,
1312
- typographyColor = theme.typographyColor;
1313
- var _g = useHoverDropdown({
1085
+ var effectiveNovacThemeEnabled = isNovacThemeEnabled && !scrolled;
1086
+ var headerBackground = effectiveNovacThemeEnabled ? 'transparent' : '#F7FAFF';
1087
+ var hoverColor = effectiveNovacThemeEnabled ? '#FFB8A5' : '#FF4F17';
1088
+ var _f = useHoverDropdown({
1314
1089
  openDelay: 0
1315
1090
  }),
1316
- isDropdownVisible = _g.isDropdownVisible,
1317
- hoveredElemIndex = _g.hoveredElemIndex,
1318
- handleOnMouseEnter = _g.handleOnMouseEnter,
1319
- handleOnMouseLeave = _g.handleOnMouseLeave,
1320
- handleDropdownMouseEnter = _g.handleDropdownMouseEnter,
1321
- handleDropdownMouseLeave = _g.handleDropdownMouseLeave;
1322
- var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
1323
- var createPayload = react.useCallback(function (actionName, actionType) {
1324
- return {
1325
- action_name: actionName,
1326
- action_type: actionType,
1327
- u_utm_source: utmSource,
1328
- loyalty_type: ravenLoyaltyTypes(loyaltyType)
1329
- };
1330
- }, [utmSource, loyaltyType]);
1331
- var handleNavbarOptionsClick = react.useCallback(function (option) {
1332
- if (option.isClickable && option.link) {
1333
- var actionName = "".concat(option.text.toLowerCase().replace(/\s/g, ''), "_header_click");
1334
- var payload = createPayload(actionName, 'click');
1335
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
1336
- window.location.href = option.link;
1337
- }
1338
- }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
1339
- var handleHomeClick = react.useCallback(function () {
1340
- var payload = createPayload('home_header_click', 'click');
1341
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
1342
- window.location.href = '/';
1343
- }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
1344
- var triggerRavenEventOnHover = react.useCallback(function (option) {
1345
- var actionName = "".concat(option.text.toLowerCase().replace(/\s/g, ''), "_header_hover");
1346
- var payload = createPayload(actionName, 'hover');
1347
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
1348
- }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
1091
+ isDropdownVisible = _f.isDropdownVisible,
1092
+ hoveredElemIndex = _f.hoveredElemIndex,
1093
+ handleOnMouseEnter = _f.handleOnMouseEnter,
1094
+ handleOnMouseLeave = _f.handleOnMouseLeave,
1095
+ handleDropdownMouseEnter = _f.handleDropdownMouseEnter,
1096
+ handleDropdownMouseLeave = _f.handleDropdownMouseLeave;
1349
1097
  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
1350
1098
  children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({
1351
1099
  display: 'flex',
@@ -1360,7 +1108,7 @@
1360
1108
  css: {
1361
1109
  gap: '24px',
1362
1110
  flexShrink: 0,
1363
- borderBottom: headerBackground === 'transparent' ? '' : '1px solid #E6E6E6',
1111
+ borderBottom: effectiveNovacThemeEnabled ? '' : '1px solid #E6E6E6',
1364
1112
  transition: 'background-color 0.3s ease-in-out, border-bottom 0.3s ease-in-out'
1365
1113
  }
1366
1114
  }, {
@@ -1370,7 +1118,7 @@
1370
1118
  justifyContent: 'space-between',
1371
1119
  padding: '0 28px',
1372
1120
  flex: 1,
1373
- css: {
1121
+ style: {
1374
1122
  gap: '24px',
1375
1123
  maxWidth: 1440
1376
1124
  }
@@ -1381,10 +1129,13 @@
1381
1129
  alignItems: 'center',
1382
1130
  justifyContent: 'center',
1383
1131
  cursor: 'pointer',
1384
- onClick: handleHomeClick
1132
+ paddingLeft: '16px',
1133
+ onClick: function () {
1134
+ window.location.href = '/';
1135
+ }
1385
1136
  }, {
1386
1137
  children: [jsxRuntime.jsx(ctDesignIcons.CTLogo, {
1387
- fillColor: logoFill
1138
+ fillColor: effectiveNovacThemeEnabled ? '#FFF' : '#FF4F17'
1388
1139
  }), jsxRuntime.jsx(ctDesignDivider.Divider, {
1389
1140
  css: {
1390
1141
  width: 12,
@@ -1394,7 +1145,7 @@
1394
1145
  borderBottom: '1px solid #e0e0e0'
1395
1146
  }
1396
1147
  }), jsxRuntime.jsx(ctDesignIcons.Fkcompany, {
1397
- color: fkcompanyColor
1148
+ color: effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
1398
1149
  })]
1399
1150
  })), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
1400
1151
  display: 'flex',
@@ -1411,18 +1162,11 @@
1411
1162
  columnGap: '4px'
1412
1163
  }, {
1413
1164
  children: NAVBAR_OPTIONS.map(function (option, index) {
1414
- var text = option.text,
1415
- LeftIcon = option.lefticon,
1416
- RightIcon = option.rightIcon,
1417
- isHoverable = option.isHoverable;
1418
1165
  var isHovered = hoveredElemIndex === index;
1419
1166
  return jsxRuntime.jsxs(ctDesignContainer.Container, {
1420
1167
  children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
1421
1168
  onMouseEnter: function () {
1422
- handleOnMouseEnter(index);
1423
- if (option.isHoverable) {
1424
- triggerRavenEventOnHover(option);
1425
- }
1169
+ return handleOnMouseEnter(index);
1426
1170
  },
1427
1171
  onMouseLeave: handleOnMouseLeave,
1428
1172
  display: 'flex',
@@ -1434,11 +1178,13 @@
1434
1178
  columnGap: 8,
1435
1179
  height: '64px',
1436
1180
  onClick: function () {
1437
- return handleNavbarOptionsClick(option);
1181
+ if (option.link && option.isClickable) {
1182
+ window.location.href = option.link;
1183
+ }
1438
1184
  }
1439
1185
  }, {
1440
- children: [jsxRuntime.jsx(LeftIcon, {
1441
- color: isHovered ? hoverColor : typographyColor
1186
+ children: [jsxRuntime.jsx(option.lefticon, {
1187
+ color: isHovered ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
1442
1188
  }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
1443
1189
  display: 'flex',
1444
1190
  flexDirection: 'row',
@@ -1446,31 +1192,31 @@
1446
1192
  }, {
1447
1193
  children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
1448
1194
  variant: 'B2',
1449
- colorCode: isHovered ? hoverColor : typographyColor,
1195
+ colorCode: isHovered ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A',
1450
1196
  isClickable: true
1451
1197
  }, {
1452
- children: text
1453
- })), RightIcon && jsxRuntime.jsx(RightIcon, {
1198
+ children: option.text
1199
+ })), option.rightIcon && jsxRuntime.jsx(option.rightIcon, {
1454
1200
  width: 20,
1455
1201
  height: 20,
1456
- fill: isHovered ? hoverColor : typographyColor
1202
+ fill: isHovered ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
1457
1203
  })]
1458
1204
  }))]
1459
1205
  }), "nav-option-".concat(index)), jsxRuntime.jsx(HeaderAnimatedMask, __assign({
1460
- show: hoveredElemIndex === index && isHoverable && isDropdownVisible,
1206
+ show: hoveredElemIndex === index && option.isHoverable && isDropdownVisible,
1461
1207
  marginTop: '64px',
1462
1208
  handleDropdownMouseEnter: handleDropdownMouseEnter,
1463
1209
  handleDropdownMouseLeave: handleDropdownMouseLeave,
1464
1210
  onMaskClick: handleDropdownMouseLeave
1465
1211
  }, {
1466
1212
  children: jsxRuntime.jsx(BusinessDropdownContent, {
1467
- isOpen: hoveredElemIndex === index && isHoverable && isDropdownVisible
1213
+ isOpen: hoveredElemIndex === index && option.isHoverable && isDropdownVisible
1468
1214
  })
1469
1215
  }))]
1470
1216
  });
1471
1217
  })
1472
1218
  })), isUserLoggedIn && jsxRuntime.jsx(ctDesignDivider.Divider, {
1473
- css: {
1219
+ style: {
1474
1220
  width: 12,
1475
1221
  margin: '0 -18px',
1476
1222
  transform: 'rotate(90deg)',
@@ -1484,21 +1230,21 @@
1484
1230
  }, {
1485
1231
  children: jsxRuntime.jsx(UserAccount, {})
1486
1232
  })) : jsxRuntime.jsx(ctDesignButton.Button, __assign({
1487
- className: "".concat(headerBackground === 'transparent' ? 'novac-login-button' : 'login-button'),
1233
+ className: "fw-400 fs-14 ".concat(effectiveNovacThemeEnabled ? 'novac-login-button' : 'login-button'),
1488
1234
  onClick: onLoginButtonClick,
1489
- css: {
1235
+ style: {
1490
1236
  width: 153,
1491
1237
  height: 40,
1492
- border: headerBackground === 'transparent' ? '1px solid #FFFFFF !important' : '1px solid #1A1A1A !important'
1238
+ border: effectiveNovacThemeEnabled ? '1px solid #FFF' : '1px solid #1A1A1A'
1493
1239
  },
1494
1240
  loading: false
1495
1241
  }, {
1496
1242
  children: jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
1497
1243
  componentNode: 'span',
1498
1244
  variant: 'L2',
1499
- color: headerBackground === 'transparent' ? 'neutral' : 'primary'
1245
+ color: effectiveNovacThemeEnabled ? 'neutral' : 'primary'
1500
1246
  }, {
1501
- children: LOG_IN_TEXT
1247
+ children: "Login"
1502
1248
  }))
1503
1249
  }))
1504
1250
  })]