@cleartrip/ct-design-header 1.2.0-SNAPSHOT-header-v0.7.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,53 +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
- borderRadius: '40px',
214
- padding: '8px 16px 8px 8px',
215
- transition: 'background 0.2s ease'
216
- }
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
217
192
  }, {
218
- children: [jsxRuntime.jsx("img", {
219
- src: image,
220
- alt: title,
221
- width: 32,
222
- height: 32
223
- }), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
224
- variant: isSelected ? ctDesignTypography.TypographyVariant.HM3 : ctDesignTypography.TypographyVariant.B1,
225
- isClickable: true
226
- }, {
227
- children: title
228
- }))]
229
- }), index)
230
- }));
193
+ children: item.title
194
+ }))]
195
+ }), index);
231
196
  })
232
197
  }));
233
198
  };
@@ -426,85 +391,11 @@
426
391
  };
427
392
  };
428
393
 
429
- var stringifyPayload = function (payload) {
430
- var keys = Object.keys(payload);
431
- var numericValues = [];
432
- keys.forEach(function (key) {
433
- if (numericValues.includes(key)) {
434
- payload[key] = Number(payload[key]);
435
- } else {
436
- payload[key] = '' + payload[key];
437
- }
438
- });
439
- return payload;
440
- };
441
- var isServer = function () {
442
- return typeof window === 'undefined' || !window;
443
- };
444
- var getQueryParam = function (queryParam) {
445
- if (isServer()) {
446
- return '';
447
- }
448
- var urlParams = new URLSearchParams(window.location.search);
449
- return urlParams.get(queryParam);
450
- };
451
- var ravenLoyaltyTypes = function (loyaltyType) {
452
- switch (loyaltyType) {
453
- case 'FkVip':
454
- return 'fk_vip';
455
- case 'FkPremium':
456
- return 'fk_plus_premium';
457
- case 'InsiderIcon':
458
- return 'myntra_insidericon';
459
- case 'InsiderElite':
460
- return 'myntra_insiderelite';
461
- default:
462
- return '';
463
- }
464
- };
465
- var ravenSDKTrigger = function (isUserLoggedIn, eventName, ravenPayload, customRavenPayload, ravenPushCallback, pageName) {
466
- var _a;
467
- if (typeof ravenPushCallback !== 'function') {
468
- console.error('ravenPushCallback is not provided or is not a function');
469
- return;
470
- }
471
- var commonPayload = {
472
- page_name: pageName,
473
- platform: RAVEN_PLATFORMS.DESKTOP,
474
- login_status: isUserLoggedIn ? 'yes' : 'no',
475
- domain: (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.host
476
- };
477
- var newRavenPayload = stringifyPayload(ravenPayload);
478
- var parsedCustomRavenPayload = stringifyPayload(customRavenPayload);
479
- var finalPayload = __assign(__assign(__assign({}, commonPayload), newRavenPayload), parsedCustomRavenPayload);
480
- try {
481
- if (ravenPushCallback.length === 1) {
482
- ravenPushCallback({
483
- eventName: eventName,
484
- eventData: finalPayload
485
- });
486
- } else {
487
- ravenPushCallback(eventName, finalPayload);
488
- }
489
- } catch (err) {
490
- console.error(err);
491
- return;
492
- }
493
- };
494
-
495
394
  var BusinessDropdownContent = function (_a) {
496
395
  var isOpen = _a.isOpen;
497
- var _b = useHeaderContext(),
498
- isUserLoggedIn = _b.isUserLoggedIn,
499
- ravenPushCallback = _b.ravenPushCallback,
500
- ravenPageName = _b.ravenPageName,
501
- ravenEventName = _b.ravenEventName,
502
- loyaltyType = _b.loyaltyType,
503
- _c = _b.ravenPayload,
504
- ravenPayload = _c === void 0 ? {} : _c;
505
- var _d = react.useState(0),
506
- leftPosition = _d[0],
507
- setLeftPosition = _d[1];
396
+ var _b = react.useState(0),
397
+ leftPosition = _b[0],
398
+ setLeftPosition = _b[1];
508
399
  var containerRef = useDropdownAnimation(isOpen).containerRef;
509
400
  react.useEffect(function () {
510
401
  var updatePosition = function () {
@@ -523,21 +414,6 @@
523
414
  return window.removeEventListener('resize', updatePosition);
524
415
  };
525
416
  }, [containerRef, leftPosition]);
526
- var handleBusinessDropdownClick = react.useCallback(function (link, title, ravenActionName) {
527
- var _a;
528
- var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
529
- var actionName = ravenActionName ? "".concat(ravenActionName, "_business_click") : title ? "".concat(title.toLowerCase(), "_business_click") : '';
530
- var defaultPayload = {
531
- action_name: actionName,
532
- action_type: 'click',
533
- u_utm_source: utmSource,
534
- loyalty_type: ravenLoyaltyTypes(loyaltyType)
535
- };
536
- if (link) {
537
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
538
- window.location.href = link;
539
- }
540
- }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, loyaltyType]);
541
417
  return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
542
418
  ref: containerRef,
543
419
  backgroundColor: '#fff',
@@ -558,7 +434,10 @@
558
434
  backgroundColor: '#FFF1EC'
559
435
  }, {
560
436
  children: jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
561
- variant: 'HM2'
437
+ variant: 'HM2',
438
+ css: {
439
+ lineHeight: '24px'
440
+ }
562
441
  }, {
563
442
  children: BUSINESS_DROPDOWN_HEADING
564
443
  }))
@@ -572,46 +451,32 @@
572
451
  children: bdConfig.map(function (_a) {
573
452
  var title = _a.title,
574
453
  subtitle = _a.subtitle,
575
- details = _a.details,
576
- link = _a.link,
577
- ravenActionName = _a.ravenActionName;
454
+ details = _a.details;
578
455
  return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
579
456
  cursor: 'pointer',
580
- display: 'flex',
581
- flexDirection: 'column',
582
457
  width: '200px',
583
- rowGap: '11px',
584
- className: 'bd-hover-container',
585
- onClick: function () {
586
- return handleBusinessDropdownClick(link, title, ravenActionName);
587
- }
458
+ className: 'bd-hover-container'
588
459
  }, {
589
460
  children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
590
461
  display: 'flex',
591
- flexDirection: 'column',
592
- rowGap: '4px'
462
+ flexDirection: 'row',
463
+ alignItems: 'center',
464
+ columnGap: '8px'
593
465
  }, {
594
- children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
595
- display: 'flex',
596
- flexDirection: 'row',
597
- alignItems: 'center',
598
- columnGap: '8px'
466
+ children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
467
+ variant: 'HM2',
468
+ className: 'color-orange-on-hover'
599
469
  }, {
600
- children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
601
- variant: 'HM2',
602
- className: 'color-orange-on-hover'
603
- }, {
604
- children: title
605
- })), jsxRuntime.jsx(AnimatedArrow, {})]
606
- })), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
607
- variant: 'B3',
608
- css: {
609
- marginTop: '4px',
610
- opacity: 0.75
611
- }
612
- }, {
613
- children: subtitle
614
- }))]
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
615
480
  })), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
616
481
  variant: 'P3',
617
482
  color: 'subheading',
@@ -689,7 +554,6 @@
689
554
  redirectionLink: 'accounts/personal-data-dashboard'
690
555
  }];
691
556
  var SIGN_OUT_TEXT = 'Logout';
692
- var MY_ACCOUNT_TEXT = 'My Account';
693
557
  var LOGGEDIN_USER_TEXT = 'You are logged in with';
694
558
  var HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID = 'header-acc-btn';
695
559
  var ACCOUNT_OPTIONS_CONTAINER_ID = 'account-options';
@@ -701,33 +565,13 @@
701
565
  backgroundGradient = _a.backgroundGradient,
702
566
  handleChipClick = _a.handleChipClick,
703
567
  chevronFillColor = _a.chevronFillColor;
704
- var _b = useHeaderContext(),
705
- loyaltyType = _b.loyaltyType,
706
- isUserLoggedIn = _b.isUserLoggedIn,
707
- ravenPushCallback = _b.ravenPushCallback,
708
- ravenPageName = _b.ravenPageName,
709
- _c = _b.ravenPayload,
710
- ravenPayload = _c === void 0 ? {} : _c,
711
- ravenEventName = _b.ravenEventName;
712
- var _d = react.useState(false),
713
- isHovered = _d[0],
714
- setIsHovered = _d[1];
715
- var handleClick = react.useCallback(function () {
716
- var _a;
717
- if (handleChipClick) {
718
- handleChipClick();
719
- } else {
720
- var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
721
- var defaultPayload = {
722
- action_name: "loyalty_account_click",
723
- action_type: 'click',
724
- u_utm_source: utmSource,
725
- loyaltyType: ravenLoyaltyTypes(loyaltyType)
726
- };
727
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
728
- window.location.href = '/all-offers/loyalty-october';
729
- }
730
- }, [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
+ };
731
575
  return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
732
576
  display: 'flex',
733
577
  position: 'relative',
@@ -752,7 +596,7 @@
752
596
  onClick: handleClick
753
597
  }, {
754
598
  children: [jsxRuntime.jsx(ctDesignContainer.Container, {
755
- css: {
599
+ style: {
756
600
  content: '""',
757
601
  position: 'absolute',
758
602
  inset: 0,
@@ -761,7 +605,7 @@
761
605
  zIndex: -2
762
606
  }
763
607
  }), jsxRuntime.jsx(ctDesignContainer.Container, {
764
- css: {
608
+ style: {
765
609
  content: '""',
766
610
  position: 'absolute',
767
611
  inset: 0,
@@ -782,7 +626,7 @@
782
626
  })), jsxRuntime.jsx(ctDesignContainer.Container, __assign({
783
627
  display: 'flex',
784
628
  alignItems: 'center',
785
- css: {
629
+ style: {
786
630
  overflow: 'hidden',
787
631
  maxWidth: isHovered ? 16 : 0,
788
632
  transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
@@ -847,46 +691,24 @@
847
691
  handleChipClick = _a.handleChipClick,
848
692
  value = _a.value,
849
693
  type = _a.type;
850
- var _b = useHeaderContext(),
851
- loyaltyType = _b.loyaltyType,
852
- isUserLoggedIn = _b.isUserLoggedIn,
853
- ravenPushCallback = _b.ravenPushCallback,
854
- ravenPageName = _b.ravenPageName,
855
- ravenEventName = _b.ravenEventName,
856
- _c = _b.ravenPayload,
857
- ravenPayload = _c === void 0 ? {} : _c;
858
- var _d = react.useState(false),
859
- isHovered = _d[0],
860
- setIsHovered = _d[1];
861
- var handleDefaultClick = react.useCallback(function () {
862
- var _a;
863
- if (handleChipClick) {
864
- handleChipClick();
865
- } else {
866
- var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
867
- var defaultPayload = {
868
- action_name: "".concat(type, "_account_click"),
869
- action_type: 'click',
870
- u_utm_source: utmSource,
871
- loyaltyType: ravenLoyaltyTypes(loyaltyType)
872
- };
873
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
874
- var redirectUrls = {
875
- supercoin: '/all-offers/supercoins/',
876
- wallet: '/accounts/wallet'
877
- };
878
- if (redirectUrls[type]) {
879
- window.location.href = redirectUrls[type];
880
- }
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';
881
702
  }
882
- }, [handleChipClick, type, loyaltyType, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
703
+ handleChipClick && handleChipClick();
704
+ };
883
705
  return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
884
706
  display: 'flex',
885
707
  alignItems: 'center',
886
708
  justifyContent: 'center',
887
709
  borderRadius: '8px',
888
710
  cursor: 'pointer',
889
- css: {
711
+ style: {
890
712
  height: 32,
891
713
  paddingLeft: 8,
892
714
  paddingRight: isHovered ? 4 : 8,
@@ -917,7 +739,7 @@
917
739
  })), jsxRuntime.jsx(ctDesignContainer.Container, __assign({
918
740
  display: 'flex',
919
741
  alignItems: 'center',
920
- css: {
742
+ style: {
921
743
  overflow: 'hidden',
922
744
  maxWidth: isHovered ? 16 : 0,
923
745
  transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
@@ -945,12 +767,6 @@
945
767
  hideWalletChip = _b.hideWalletChip,
946
768
  hideSupercoinsChip = _b.hideSupercoinsChip,
947
769
  hideLoyaltyChip = _b.hideLoyaltyChip;
948
- var shouldShowLoyalty = loyaltyLoading || selectedLoyaltyType && LOYALTY_DATA[selectedLoyaltyType] && !hideLoyaltyChip;
949
- var shouldShowSupercoin = superCoinsLoading || !hideSupercoinsChip;
950
- var shouldShowWallet = walletLoading || !hideWalletChip;
951
- if (!shouldShowLoyalty && !shouldShowSupercoin && !shouldShowWallet) {
952
- return null;
953
- }
954
770
  return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
955
771
  display: 'flex',
956
772
  padding: '0 16px 16px 16px',
@@ -960,20 +776,22 @@
960
776
  gap: '4px'
961
777
  }
962
778
  }, {
963
- children: [loyaltyLoading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
779
+ children: [loyaltyLoading ? jsxRuntime.jsx(ctDesignContainer.Container, {
964
780
  width: '50px',
965
781
  height: '32px',
966
- borderRadius: '8px'
782
+ borderRadius: '8px',
783
+ backgroundColor: '#efefef'
967
784
  }) : selectedLoyaltyType && LOYALTY_DATA[selectedLoyaltyType] && !hideLoyaltyChip && jsxRuntime.jsx(LoyaltyChip, {
968
785
  icon: LOYALTY_DATA[selectedLoyaltyType].icon,
969
786
  borderGradient: LOYALTY_DATA[selectedLoyaltyType].borderGradient,
970
787
  backgroundGradient: LOYALTY_DATA[selectedLoyaltyType].backgroundGradient,
971
788
  chevronFillColor: ((_a = LOYALTY_DATA[selectedLoyaltyType]) === null || _a === void 0 ? void 0 : _a.chevronFillColor) || '#FFF',
972
789
  handleChipClick: loyaltyChipClick
973
- }), superCoinsLoading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
790
+ }), superCoinsLoading ? jsxRuntime.jsx(ctDesignContainer.Container, {
974
791
  width: '50px',
975
792
  height: '32px',
976
- borderRadius: '8px'
793
+ borderRadius: '8px',
794
+ backgroundColor: '#efefef'
977
795
  }) : !hideSupercoinsChip && jsxRuntime.jsx(ExpandableItem, {
978
796
  icon: jsxRuntime.jsx(ctDesignIcons.Supercoin, {
979
797
  width: 20,
@@ -981,11 +799,12 @@
981
799
  }),
982
800
  value: superCoinBalance,
983
801
  handleChipClick: supercoinsChipClick,
984
- type: 'supercoin'
985
- }), walletLoading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
802
+ type: 'supercoins'
803
+ }), walletLoading ? jsxRuntime.jsx(ctDesignContainer.Container, {
986
804
  width: '50px',
987
805
  height: '32px',
988
- borderRadius: '8px'
806
+ borderRadius: '8px',
807
+ backgroundColor: '#efefef'
989
808
  }) : !hideWalletChip && jsxRuntime.jsx(ExpandableItem, {
990
809
  icon: jsxRuntime.jsx(ctDesignIcons.Wallet, {
991
810
  width: 20,
@@ -1005,60 +824,45 @@
1005
824
  userName = _b.userName,
1006
825
  userMobileNumber = _b.userMobileNumber,
1007
826
  countryCode = _b.countryCode,
1008
- userDetailsLoading = _b.userDetailsLoading,
1009
- loyaltyType = _b.loyaltyType,
1010
- isUserLoggedIn = _b.isUserLoggedIn,
1011
- ravenEventName = _b.ravenEventName,
1012
- ravenPageName = _b.ravenPageName,
1013
- _c = _b.ravenPayload,
1014
- ravenPayload = _c === void 0 ? {} : _c,
1015
- ravenPushCallback = _b.ravenPushCallback;
827
+ userDetailsLoading = _b.userDetailsLoading;
1016
828
  var containerRef = useDropdownAnimation(isOpen).containerRef;
1017
- 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) : '';
1018
832
  return {
1019
- userGreeting: userName ? "Hello ".concat(userName, "!") : '',
1020
- phoneNumber: countryCode && userMobileNumber ? "".concat(countryCode, " ").concat(userMobileNumber) : ''
833
+ userGreeting: userGreeting,
834
+ phoneNumber: phoneNumber
1021
835
  };
1022
836
  }, [userName, userMobileNumber, countryCode]),
1023
- userGreeting = _d.userGreeting,
1024
- phoneNumber = _d.phoneNumber;
1025
- var generateRavenPayload = function (actionName) {
1026
- var _a;
1027
- return {
1028
- action_name: actionName.toLowerCase().replace(/[\s-]/g, '') + '_account_click',
1029
- action_type: 'click',
1030
- u_utm_source: (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic',
1031
- 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;
1032
842
  };
1033
843
  };
1034
- var handleAccountOptionsClick = react.useCallback(function (text, redirectLink) {
1035
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, generateRavenPayload(text), ravenPayload, ravenPushCallback, ravenPageName);
1036
- window.location.href = redirectLink;
1037
- }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
1038
- react.useCallback(function () {
1039
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, generateRavenPayload(SIGN_OUT_TEXT), ravenPayload, ravenPushCallback, ravenPageName);
1040
- handleLogoutClick();
1041
- }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, handleLogoutClick]);
1042
- var positionAccountOptionsDiv = react.useCallback(function () {
844
+ react.useEffect(function () {
1043
845
  var headerAccBtn = document.getElementById(HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID);
1044
846
  var accountOptionsElem = document.getElementById(ACCOUNT_OPTIONS_CONTAINER_ID);
1045
- if (headerAccBtn && accountOptionsElem) {
1046
- var headerBtnRight = headerAccBtn.getBoundingClientRect().right;
1047
- accountOptionsElem.style.left = "".concat(headerBtnRight - ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px");
1048
- }
1049
- }, []);
1050
- 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
+ };
1051
853
  positionAccountOptionsDiv();
1052
- }, [positionAccountOptionsDiv]);
854
+ }, []);
1053
855
  var renderUserData = function () {
1054
856
  var renderContent = function (loading, content, variant, color) {
1055
857
  return jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
1056
858
  variant: variant,
1057
859
  color: color
1058
860
  }, {
1059
- children: loading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
861
+ children: loading ? jsxRuntime.jsx(ctDesignContainer.Container, {
1060
862
  height: variant === 'HM3' ? '18px' : '12px',
1061
- width: variant === 'HM3' ? '140px' : '200px'
863
+ width: variant === 'HM3' ? '140px' : '200px',
864
+ backgroundColor: '#efefef',
865
+ borderRadius: '8px'
1062
866
  }) : content
1063
867
  }));
1064
868
  };
@@ -1094,7 +898,7 @@
1094
898
  }, {
1095
899
  children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({
1096
900
  padding: '16px',
1097
- height: '76px'
901
+ height: '72px'
1098
902
  }, {
1099
903
  children: renderUserData()
1100
904
  })), jsxRuntime.jsx(RewardsSection, {}), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
@@ -1103,7 +907,7 @@
1103
907
  padding: '8px',
1104
908
  backgroundColor: 'white',
1105
909
  rowGap: '8px',
1106
- css: {
910
+ style: {
1107
911
  borderBottomLeftRadius: 12,
1108
912
  borderBottomRightRadius: 12
1109
913
  }
@@ -1117,14 +921,12 @@
1117
921
  padding: '8px',
1118
922
  borderRadius: '8px',
1119
923
  cursor: 'pointer',
1120
- onClick: function () {
1121
- return handleAccountOptionsClick(text, redirectionLink);
1122
- }
924
+ onClick: handleRedirectClick(redirectionLink)
1123
925
  }, {
1124
926
  children: jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
1125
927
  display: 'flex',
1126
928
  cursor: 'pointer',
1127
- css: {
929
+ style: {
1128
930
  columnGap: '8px'
1129
931
  }
1130
932
  }, {
@@ -1141,7 +943,7 @@
1141
943
  }))
1142
944
  }), "account-option-".concat(text));
1143
945
  }), jsxRuntime.jsx(ctDesignDivider.Divider, {
1144
- css: {
946
+ style: {
1145
947
  borderBottom: '1px dashed #E6E6E6'
1146
948
  }
1147
949
  }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
@@ -1172,49 +974,29 @@
1172
974
  };
1173
975
 
1174
976
  var UserAccount = function () {
1175
- var _a = useHeaderContext(),
1176
- isNovacThemeEnabled = _a.isNovacThemeEnabled,
1177
- ravenEventName = _a.ravenEventName,
1178
- _b = _a.ravenPayload,
1179
- ravenPayload = _b === void 0 ? {} : _b,
1180
- ravenPushCallback = _a.ravenPushCallback,
1181
- isUserLoggedIn = _a.isUserLoggedIn,
1182
- loyaltyType = _a.loyaltyType,
1183
- ravenPageName = _a.ravenPageName;
1184
- var _c = useHoverDropdown({
977
+ var isNovacThemeEnabled = useHeaderContext().isNovacThemeEnabled;
978
+ var _a = useHoverDropdown({
1185
979
  openDelay: 0
1186
980
  }),
1187
- isDropdownVisible = _c.isDropdownVisible,
1188
- handleOnMouseEnter = _c.handleOnMouseEnter,
1189
- handleOnMouseLeave = _c.handleOnMouseLeave,
1190
- handleDropdownMouseEnter = _c.handleDropdownMouseEnter,
1191
- handleDropdownMouseLeave = _c.handleDropdownMouseLeave;
1192
- var _d = react.useState(false),
1193
- scrolled = _d[0],
1194
- 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];
1195
989
  react.useEffect(function () {
1196
990
  var handleScroll = function () {
1197
- setScrolled(window.scrollY >= 50);
991
+ setScrolled(window.scrollY >= 100);
1198
992
  };
1199
993
  window.addEventListener('scroll', handleScroll);
1200
994
  return function () {
1201
995
  return window.removeEventListener('scroll', handleScroll);
1202
996
  };
1203
997
  }, []);
1204
- var theme = isNovacThemeEnabled && !scrolled ? THEME_CONFIG.NOVAC : THEME_CONFIG.DEFAULT;
1205
- var hoverColor = theme.hoverColor,
1206
- typographyColor = theme.typographyColor;
1207
- var triggerRavenEventOnHover = react.useCallback(function () {
1208
- var _a;
1209
- var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
1210
- var defaultPayload = {
1211
- action_name: "".concat(MY_ACCOUNT_TEXT.toLowerCase().replace(/[\s-]/g, ''), "_header_hover"),
1212
- action_type: 'hover',
1213
- u_utm_source: utmSource,
1214
- loyalty_type: ravenLoyaltyTypes(loyaltyType)
1215
- };
1216
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
1217
- }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, loyaltyType]);
998
+ var effectiveNovacThemeEnabled = isNovacThemeEnabled && !scrolled;
999
+ var hoverColor = effectiveNovacThemeEnabled ? '#FFB8A5' : '#FF4F17';
1218
1000
  return jsxRuntime.jsxs(ctDesignContainer.Container, {
1219
1001
  children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
1220
1002
  display: 'flex',
@@ -1223,19 +1005,18 @@
1223
1005
  borderRadius: '12px',
1224
1006
  height: '100%',
1225
1007
  cursor: 'pointer',
1226
- css: {
1008
+ style: {
1227
1009
  columnGap: 8,
1228
1010
  height: 64
1229
1011
  },
1230
1012
  onMouseEnter: function () {
1231
- handleOnMouseEnter(0);
1232
- triggerRavenEventOnHover();
1013
+ return handleOnMouseEnter(0);
1233
1014
  },
1234
1015
  onMouseLeave: handleOnMouseLeave,
1235
1016
  id: HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID
1236
1017
  }, {
1237
1018
  children: [jsxRuntime.jsx(ctDesignIcons.MyAccount, {
1238
- color: isDropdownVisible ? hoverColor : typographyColor
1019
+ color: isDropdownVisible ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
1239
1020
  }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
1240
1021
  display: 'flex',
1241
1022
  flexDirection: 'row',
@@ -1246,13 +1027,13 @@
1246
1027
  css: {
1247
1028
  cursor: 'pointer'
1248
1029
  },
1249
- colorCode: isDropdownVisible ? hoverColor : typographyColor
1030
+ colorCode: isDropdownVisible ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
1250
1031
  }, {
1251
- children: MY_ACCOUNT_TEXT
1032
+ children: "My Account"
1252
1033
  })), jsxRuntime.jsx(ctDesignIcons.ChevronDown, {
1253
1034
  width: 20,
1254
1035
  height: 20,
1255
- fill: isDropdownVisible ? hoverColor : typographyColor
1036
+ fill: isDropdownVisible ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
1256
1037
  })]
1257
1038
  }))]
1258
1039
  })), jsxRuntime.jsx(HeaderAnimatedMask, __assign({
@@ -1277,74 +1058,42 @@
1277
1058
  }));
1278
1059
  };
1279
1060
  var HeaderContent = function () {
1280
- var _a;
1281
- var _b = useHeaderContext(),
1282
- onLoginButtonClick = _b.onLoginButtonClick,
1283
- _c = _b.showAllLobs,
1284
- showAllLobs = _c === void 0 ? false : _c,
1285
- isUserLoggedIn = _b.isUserLoggedIn,
1286
- loyaltyType = _b.loyaltyType,
1287
- _d = _b.isNovacThemeEnabled,
1288
- isNovacThemeEnabled = _d === void 0 ? false : _d,
1289
- _e = _b.ravenPayload,
1290
- ravenPayload = _e === void 0 ? {} : _e,
1291
- ravenPushCallback = _b.ravenPushCallback,
1292
- ravenPageName = _b.ravenPageName,
1293
- ravenEventName = _b.ravenEventName;
1294
- var _f = react.useState(false),
1295
- scrolled = _f[0],
1296
- 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];
1297
1076
  react.useEffect(function () {
1298
1077
  var handleScroll = function () {
1299
- setScrolled(window.scrollY >= 50);
1078
+ setScrolled(window.scrollY >= 100);
1300
1079
  };
1301
1080
  window.addEventListener('scroll', handleScroll);
1302
1081
  return function () {
1303
1082
  return window.removeEventListener('scroll', handleScroll);
1304
1083
  };
1305
1084
  }, []);
1306
- var theme = isNovacThemeEnabled && !scrolled ? THEME_CONFIG.NOVAC : THEME_CONFIG.DEFAULT;
1307
- var headerBackground = theme.headerBackground,
1308
- logoFill = theme.logoFill,
1309
- hoverColor = theme.hoverColor,
1310
- fkcompanyColor = theme.fkcompanyColor,
1311
- typographyColor = theme.typographyColor;
1312
- var _g = useHoverDropdown({
1085
+ var effectiveNovacThemeEnabled = isNovacThemeEnabled && !scrolled;
1086
+ var headerBackground = effectiveNovacThemeEnabled ? 'transparent' : '#F7FAFF';
1087
+ var hoverColor = effectiveNovacThemeEnabled ? '#FFB8A5' : '#FF4F17';
1088
+ var _f = useHoverDropdown({
1313
1089
  openDelay: 0
1314
1090
  }),
1315
- isDropdownVisible = _g.isDropdownVisible,
1316
- hoveredElemIndex = _g.hoveredElemIndex,
1317
- handleOnMouseEnter = _g.handleOnMouseEnter,
1318
- handleOnMouseLeave = _g.handleOnMouseLeave,
1319
- handleDropdownMouseEnter = _g.handleDropdownMouseEnter,
1320
- handleDropdownMouseLeave = _g.handleDropdownMouseLeave;
1321
- var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
1322
- var createPayload = react.useCallback(function (actionName, actionType) {
1323
- return {
1324
- action_name: actionName,
1325
- action_type: actionType,
1326
- u_utm_source: utmSource,
1327
- loyalty_type: ravenLoyaltyTypes(loyaltyType)
1328
- };
1329
- }, [utmSource, loyaltyType]);
1330
- var handleNavbarOptionsClick = react.useCallback(function (option) {
1331
- if (option.isClickable && option.link) {
1332
- var actionName = "".concat(option.text.toLowerCase().replace(/\s/g, ''), "_header_click");
1333
- var payload = createPayload(actionName, 'click');
1334
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
1335
- window.location.href = option.link;
1336
- }
1337
- }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
1338
- var handleHomeClick = react.useCallback(function () {
1339
- var payload = createPayload('home_header_click', 'click');
1340
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
1341
- window.location.href = '/';
1342
- }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
1343
- var triggerRavenEventOnHover = react.useCallback(function (option) {
1344
- var actionName = "".concat(option.text.toLowerCase().replace(/\s/g, ''), "_header_hover");
1345
- var payload = createPayload(actionName, 'hover');
1346
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
1347
- }, [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;
1348
1097
  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
1349
1098
  children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({
1350
1099
  display: 'flex',
@@ -1359,7 +1108,7 @@
1359
1108
  css: {
1360
1109
  gap: '24px',
1361
1110
  flexShrink: 0,
1362
- borderBottom: headerBackground === 'transparent' ? '' : '1px solid #E6E6E6',
1111
+ borderBottom: effectiveNovacThemeEnabled ? '' : '1px solid #E6E6E6',
1363
1112
  transition: 'background-color 0.3s ease-in-out, border-bottom 0.3s ease-in-out'
1364
1113
  }
1365
1114
  }, {
@@ -1369,7 +1118,7 @@
1369
1118
  justifyContent: 'space-between',
1370
1119
  padding: '0 28px',
1371
1120
  flex: 1,
1372
- css: {
1121
+ style: {
1373
1122
  gap: '24px',
1374
1123
  maxWidth: 1440
1375
1124
  }
@@ -1380,10 +1129,13 @@
1380
1129
  alignItems: 'center',
1381
1130
  justifyContent: 'center',
1382
1131
  cursor: 'pointer',
1383
- onClick: handleHomeClick
1132
+ paddingLeft: '16px',
1133
+ onClick: function () {
1134
+ window.location.href = '/';
1135
+ }
1384
1136
  }, {
1385
1137
  children: [jsxRuntime.jsx(ctDesignIcons.CTLogo, {
1386
- fillColor: logoFill
1138
+ fillColor: effectiveNovacThemeEnabled ? '#FFF' : '#FF4F17'
1387
1139
  }), jsxRuntime.jsx(ctDesignDivider.Divider, {
1388
1140
  css: {
1389
1141
  width: 12,
@@ -1393,7 +1145,7 @@
1393
1145
  borderBottom: '1px solid #e0e0e0'
1394
1146
  }
1395
1147
  }), jsxRuntime.jsx(ctDesignIcons.Fkcompany, {
1396
- color: fkcompanyColor
1148
+ color: effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
1397
1149
  })]
1398
1150
  })), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
1399
1151
  display: 'flex',
@@ -1410,18 +1162,11 @@
1410
1162
  columnGap: '4px'
1411
1163
  }, {
1412
1164
  children: NAVBAR_OPTIONS.map(function (option, index) {
1413
- var text = option.text,
1414
- LeftIcon = option.lefticon,
1415
- RightIcon = option.rightIcon,
1416
- isHoverable = option.isHoverable;
1417
1165
  var isHovered = hoveredElemIndex === index;
1418
1166
  return jsxRuntime.jsxs(ctDesignContainer.Container, {
1419
1167
  children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
1420
1168
  onMouseEnter: function () {
1421
- handleOnMouseEnter(index);
1422
- if (option.isHoverable) {
1423
- triggerRavenEventOnHover(option);
1424
- }
1169
+ return handleOnMouseEnter(index);
1425
1170
  },
1426
1171
  onMouseLeave: handleOnMouseLeave,
1427
1172
  display: 'flex',
@@ -1433,11 +1178,13 @@
1433
1178
  columnGap: 8,
1434
1179
  height: '64px',
1435
1180
  onClick: function () {
1436
- return handleNavbarOptionsClick(option);
1181
+ if (option.link && option.isClickable) {
1182
+ window.location.href = option.link;
1183
+ }
1437
1184
  }
1438
1185
  }, {
1439
- children: [jsxRuntime.jsx(LeftIcon, {
1440
- color: isHovered ? hoverColor : typographyColor
1186
+ children: [jsxRuntime.jsx(option.lefticon, {
1187
+ color: isHovered ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
1441
1188
  }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
1442
1189
  display: 'flex',
1443
1190
  flexDirection: 'row',
@@ -1445,31 +1192,31 @@
1445
1192
  }, {
1446
1193
  children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
1447
1194
  variant: 'B2',
1448
- colorCode: isHovered ? hoverColor : typographyColor,
1195
+ colorCode: isHovered ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A',
1449
1196
  isClickable: true
1450
1197
  }, {
1451
- children: text
1452
- })), RightIcon && jsxRuntime.jsx(RightIcon, {
1198
+ children: option.text
1199
+ })), option.rightIcon && jsxRuntime.jsx(option.rightIcon, {
1453
1200
  width: 20,
1454
1201
  height: 20,
1455
- fill: isHovered ? hoverColor : typographyColor
1202
+ fill: isHovered ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
1456
1203
  })]
1457
1204
  }))]
1458
1205
  }), "nav-option-".concat(index)), jsxRuntime.jsx(HeaderAnimatedMask, __assign({
1459
- show: hoveredElemIndex === index && isHoverable && isDropdownVisible,
1206
+ show: hoveredElemIndex === index && option.isHoverable && isDropdownVisible,
1460
1207
  marginTop: '64px',
1461
1208
  handleDropdownMouseEnter: handleDropdownMouseEnter,
1462
1209
  handleDropdownMouseLeave: handleDropdownMouseLeave,
1463
1210
  onMaskClick: handleDropdownMouseLeave
1464
1211
  }, {
1465
1212
  children: jsxRuntime.jsx(BusinessDropdownContent, {
1466
- isOpen: hoveredElemIndex === index && isHoverable && isDropdownVisible
1213
+ isOpen: hoveredElemIndex === index && option.isHoverable && isDropdownVisible
1467
1214
  })
1468
1215
  }))]
1469
1216
  });
1470
1217
  })
1471
1218
  })), isUserLoggedIn && jsxRuntime.jsx(ctDesignDivider.Divider, {
1472
- css: {
1219
+ style: {
1473
1220
  width: 12,
1474
1221
  margin: '0 -18px',
1475
1222
  transform: 'rotate(90deg)',
@@ -1483,21 +1230,21 @@
1483
1230
  }, {
1484
1231
  children: jsxRuntime.jsx(UserAccount, {})
1485
1232
  })) : jsxRuntime.jsx(ctDesignButton.Button, __assign({
1486
- className: "".concat(headerBackground === 'transparent' ? 'novac-login-button' : 'login-button'),
1233
+ className: "fw-400 fs-14 ".concat(effectiveNovacThemeEnabled ? 'novac-login-button' : 'login-button'),
1487
1234
  onClick: onLoginButtonClick,
1488
- css: {
1235
+ style: {
1489
1236
  width: 153,
1490
1237
  height: 40,
1491
- border: headerBackground === 'transparent' ? '1px solid #FFFFFF !important' : '1px solid #1A1A1A !important'
1238
+ border: effectiveNovacThemeEnabled ? '1px solid #FFF' : '1px solid #1A1A1A'
1492
1239
  },
1493
1240
  loading: false
1494
1241
  }, {
1495
1242
  children: jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
1496
1243
  componentNode: 'span',
1497
1244
  variant: 'L2',
1498
- color: headerBackground === 'transparent' ? 'neutral' : 'primary'
1245
+ color: effectiveNovacThemeEnabled ? 'neutral' : 'primary'
1499
1246
  }, {
1500
- children: LOG_IN_TEXT
1247
+ children: "Login"
1501
1248
  }))
1502
1249
  }))
1503
1250
  })]