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