@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.
- package/dist/BusinessDropdown/index.d.ts.map +1 -1
- package/dist/Header.d.ts.map +1 -1
- package/dist/HeaderAnimatedMask /hooks.d.ts.map +1 -1
- package/dist/LobsHeader/index.d.ts.map +1 -1
- package/dist/RewardsSection/LoyaltyChips.d.ts.map +1 -1
- package/dist/RewardsSection/index.d.ts.map +1 -1
- package/dist/UserAccount/UserAccountDropdown.d.ts.map +1 -1
- package/dist/UserAccount/accountOptions.d.ts +0 -1
- package/dist/UserAccount/accountOptions.d.ts.map +1 -1
- package/dist/UserAccount/index.d.ts.map +1 -1
- package/dist/constants.d.ts +31 -34
- package/dist/constants.d.ts.map +1 -1
- package/dist/ct-design-header.browser.cjs.js +1 -1
- package/dist/ct-design-header.browser.cjs.js.map +1 -1
- package/dist/ct-design-header.browser.esm.js +1 -1
- package/dist/ct-design-header.browser.esm.js.map +1 -1
- package/dist/ct-design-header.cjs.js +196 -450
- package/dist/ct-design-header.cjs.js.map +1 -1
- package/dist/ct-design-header.esm.js +197 -451
- package/dist/ct-design-header.esm.js.map +1 -1
- package/dist/ct-design-header.umd.js +200 -453
- package/dist/ct-design-header.umd.js.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/type.d.ts +1 -17
- package/dist/type.d.ts.map +1 -1
- package/package.json +8 -8
- package/dist/utils.d.ts +0 -8
- package/dist/utils.d.ts.map +0 -1
|
@@ -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')
|
|
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'
|
|
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
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
-
|
|
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"] = "
|
|
133
|
-
RAVEN_PAGE_NAMES["FLIGHTS_HOME"] = "
|
|
134
|
-
})(
|
|
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
|
-
|
|
158
|
+
height: '64',
|
|
159
|
+
background: '#F3F5FA',
|
|
185
160
|
top: '64px',
|
|
186
161
|
zIndex: 2,
|
|
187
162
|
css: {
|
|
188
|
-
gap:
|
|
163
|
+
gap: 40
|
|
189
164
|
}
|
|
190
165
|
}, {
|
|
191
166
|
children: LOB_DATA.map(function (item, index) {
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
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.
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
width:
|
|
207
|
-
height:
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
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:
|
|
219
|
-
|
|
220
|
-
|
|
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 =
|
|
498
|
-
|
|
499
|
-
|
|
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
|
-
|
|
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: '
|
|
592
|
-
|
|
462
|
+
flexDirection: 'row',
|
|
463
|
+
alignItems: 'center',
|
|
464
|
+
columnGap: '8px'
|
|
593
465
|
}, {
|
|
594
|
-
children: [jsxRuntime.
|
|
595
|
-
|
|
596
|
-
|
|
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:
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
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 =
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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 =
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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(
|
|
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(
|
|
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: '
|
|
985
|
-
}), walletLoading ? jsxRuntime.jsx(
|
|
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
|
|
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:
|
|
1020
|
-
phoneNumber:
|
|
833
|
+
userGreeting: userGreeting,
|
|
834
|
+
phoneNumber: phoneNumber
|
|
1021
835
|
};
|
|
1022
836
|
}, [userName, userMobileNumber, countryCode]),
|
|
1023
|
-
userGreeting =
|
|
1024
|
-
phoneNumber =
|
|
1025
|
-
var
|
|
1026
|
-
|
|
1027
|
-
|
|
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
|
-
|
|
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
|
-
|
|
1046
|
-
var headerBtnRight = headerAccBtn.getBoundingClientRect().right;
|
|
1047
|
-
accountOptionsElem
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
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
|
-
}, [
|
|
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(
|
|
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: '
|
|
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
|
-
|
|
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:
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
1176
|
-
|
|
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 =
|
|
1188
|
-
handleOnMouseEnter =
|
|
1189
|
-
handleOnMouseLeave =
|
|
1190
|
-
handleDropdownMouseEnter =
|
|
1191
|
-
handleDropdownMouseLeave =
|
|
1192
|
-
var
|
|
1193
|
-
scrolled =
|
|
1194
|
-
setScrolled =
|
|
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 >=
|
|
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
|
|
1205
|
-
var 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
|
-
|
|
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 :
|
|
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 :
|
|
1030
|
+
colorCode: isDropdownVisible ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
|
|
1250
1031
|
}, {
|
|
1251
|
-
children:
|
|
1032
|
+
children: "My Account"
|
|
1252
1033
|
})), jsxRuntime.jsx(ctDesignIcons.ChevronDown, {
|
|
1253
1034
|
width: 20,
|
|
1254
1035
|
height: 20,
|
|
1255
|
-
fill: isDropdownVisible ? hoverColor :
|
|
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
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
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 >=
|
|
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
|
|
1307
|
-
var headerBackground =
|
|
1308
|
-
|
|
1309
|
-
|
|
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 =
|
|
1316
|
-
hoveredElemIndex =
|
|
1317
|
-
handleOnMouseEnter =
|
|
1318
|
-
handleOnMouseLeave =
|
|
1319
|
-
handleDropdownMouseEnter =
|
|
1320
|
-
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:
|
|
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
|
-
|
|
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
|
-
|
|
1132
|
+
paddingLeft: '16px',
|
|
1133
|
+
onClick: function () {
|
|
1134
|
+
window.location.href = '/';
|
|
1135
|
+
}
|
|
1384
1136
|
}, {
|
|
1385
1137
|
children: [jsxRuntime.jsx(ctDesignIcons.CTLogo, {
|
|
1386
|
-
fillColor:
|
|
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:
|
|
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
|
-
|
|
1181
|
+
if (option.link && option.isClickable) {
|
|
1182
|
+
window.location.href = option.link;
|
|
1183
|
+
}
|
|
1437
1184
|
}
|
|
1438
1185
|
}, {
|
|
1439
|
-
children: [jsxRuntime.jsx(
|
|
1440
|
-
color: isHovered ? hoverColor :
|
|
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 :
|
|
1195
|
+
colorCode: isHovered ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A',
|
|
1449
1196
|
isClickable: true
|
|
1450
1197
|
}, {
|
|
1451
|
-
children: text
|
|
1452
|
-
})),
|
|
1198
|
+
children: option.text
|
|
1199
|
+
})), option.rightIcon && jsxRuntime.jsx(option.rightIcon, {
|
|
1453
1200
|
width: 20,
|
|
1454
1201
|
height: 20,
|
|
1455
|
-
fill: isHovered ? hoverColor :
|
|
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
|
-
|
|
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(
|
|
1233
|
+
className: "fw-400 fs-14 ".concat(effectiveNovacThemeEnabled ? 'novac-login-button' : 'login-button'),
|
|
1487
1234
|
onClick: onLoginButtonClick,
|
|
1488
|
-
|
|
1235
|
+
style: {
|
|
1489
1236
|
width: 153,
|
|
1490
1237
|
height: 40,
|
|
1491
|
-
border:
|
|
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:
|
|
1245
|
+
color: effectiveNovacThemeEnabled ? 'neutral' : 'primary'
|
|
1499
1246
|
}, {
|
|
1500
|
-
children:
|
|
1247
|
+
children: "Login"
|
|
1501
1248
|
}))
|
|
1502
1249
|
}))
|
|
1503
1250
|
})]
|