@cleartrip/ct-design-header 1.2.0-SNAPSHOT-testpeekCarousel.0 → 1.2.0-SNAPSHOT-rnwStable4Dec25.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.
Files changed (16) hide show
  1. package/dist/BusinessDropdown/index.d.ts.map +1 -1
  2. package/dist/LobsHeader/index.d.ts.map +1 -1
  3. package/dist/ct-design-header.browser.cjs.js +1 -1
  4. package/dist/ct-design-header.browser.cjs.js.map +1 -1
  5. package/dist/ct-design-header.browser.esm.js +1 -1
  6. package/dist/ct-design-header.browser.esm.js.map +1 -1
  7. package/dist/ct-design-header.cjs.js +753 -1424
  8. package/dist/ct-design-header.cjs.js.map +1 -1
  9. package/dist/ct-design-header.esm.js +751 -1422
  10. package/dist/ct-design-header.esm.js.map +1 -1
  11. package/dist/ct-design-header.umd.js +755 -1427
  12. package/dist/ct-design-header.umd.js.map +1 -1
  13. package/dist/styles.d.ts +12 -2
  14. package/dist/styles.d.ts.map +1 -1
  15. package/dist/utils.d.ts.map +1 -1
  16. package/package.json +13 -11
package/dist/ct-design-header.cjs.js CHANGED
@@ -8,7 +8,8 @@ var ctDesignTypography = require('@cleartrip/ct-design-typography');
8
8
  var ctDesignButton = require('@cleartrip/ct-design-button');
9
9
  var ctDesignDivider = require('@cleartrip/ct-design-divider');
10
10
  var ctDesignIcons = require('@cleartrip/ct-design-icons');
11
- var styled = require('styled-components');
11
+ var styled = require('@emotion/styled');
12
+ var react$1 = require('@emotion/react');
12
13
 
13
14
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
14
15
 
@@ -17,713 +18,531 @@ var styled__default = /*#__PURE__*/_interopDefault(styled);
17
18
  var OFFERS_URL = 'all-offers/?categories=flights';
18
19
  var MY_TRIPS_URL = '/account/trips';
19
20
  var SUPPORT_URL = '/support';
20
- var NAVBAR_OPTIONS = [{
21
- lefticon: ctDesignIcons.Offers,
22
- text: 'Offers',
23
- ravenActionName: 'offers',
24
- isHoverable: false,
25
- isClickable: true,
26
- link: OFFERS_URL
27
- }, {
28
- lefticon: ctDesignIcons.BusinessBag,
29
- text: 'Business',
30
- ravenActionName: 'business',
31
- rightIcon: ctDesignIcons.ChevronDown,
32
- isHoverable: true
33
- }, {
34
- lefticon: ctDesignIcons.MyTrips,
35
- text: 'My Trips',
36
- ravenActionName: 'mytrips',
37
- isHoverable: false,
38
- isClickable: true,
39
- link: MY_TRIPS_URL
40
- }, {
41
- lefticon: ctDesignIcons.SupportIcon,
42
- text: 'Support',
43
- ravenActionName: 'support',
44
- isHoverable: false,
45
- isClickable: true,
46
- link: SUPPORT_URL
47
- }];
21
+ var NAVBAR_OPTIONS = [
22
+ {
23
+ lefticon: ctDesignIcons.Offers,
24
+ text: 'Offers',
25
+ ravenActionName: 'offers',
26
+ isHoverable: false,
27
+ isClickable: true,
28
+ link: OFFERS_URL,
29
+ },
30
+ {
31
+ lefticon: ctDesignIcons.BusinessBag,
32
+ text: 'Business',
33
+ ravenActionName: 'business',
34
+ rightIcon: ctDesignIcons.ChevronDown,
35
+ isHoverable: true,
36
+ },
37
+ {
38
+ lefticon: ctDesignIcons.MyTrips,
39
+ text: 'My Trips',
40
+ ravenActionName: 'mytrips',
41
+ isHoverable: false,
42
+ isClickable: true,
43
+ link: MY_TRIPS_URL,
44
+ },
45
+ {
46
+ lefticon: ctDesignIcons.SupportIcon,
47
+ text: 'Support',
48
+ ravenActionName: 'support',
49
+ isHoverable: false,
50
+ isClickable: true,
51
+ link: SUPPORT_URL,
52
+ },
53
+ ];
48
54
  var LOBS = {
49
- FLIGHTS: 'Flights',
50
- HOTELS: 'Hotels',
51
- TRAIN: 'Trains',
52
- PACKAGES: 'Packages',
53
- BUSES: 'Buses'
55
+ FLIGHTS: 'Flights',
56
+ HOTELS: 'Hotels',
57
+ TRAIN: 'Trains',
58
+ PACKAGES: 'Packages',
59
+ BUSES: 'Buses',
54
60
  };
55
- var LOB_DATA = [{
56
- title: LOBS.FLIGHTS,
57
- image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Flights.png?cache=true',
58
- link: '/flights'
59
- }, {
60
- title: LOBS.HOTELS,
61
- image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Hotels.png?cache=true',
62
- link: '/hotels'
63
- }, {
64
- title: LOBS.BUSES,
65
- image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Buses.png?cache=true',
66
- link: '/bus'
67
- }, {
68
- title: LOBS.PACKAGES,
69
- image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Packages.png?cache=true',
70
- link: '/holidays'
71
- }];
72
- var bdConfig = [{
73
- title: 'AgentBox',
74
- subtitle: 'For travel agents',
75
- details: 'One-stop travel solution offering the best deals to our travel agency partners',
76
- link: 'https://agency.cleartrip.com'
77
- }, {
78
- title: 'OutOfOffice',
79
- subtitle: 'For startups, corporates and SMEs',
80
- details: 'Manage corporate business travel, smartly',
81
- link: 'https://ooo.cleartrip.com/',
82
- ravenActionName: 'ooo'
83
- }, {
84
- title: 'MICE',
85
- subtitle: 'For corporate events',
86
- details: 'An end-to-end management solution for all your corporate events',
87
- link: 'https://business.cleartrip.com/'
88
- }, {
89
- title: 'API',
90
- subtitle: 'For developers',
91
- details: 'Unlock seamless integration and scale with our powerful, reliable APIs',
92
- link: 'https://business.cleartrip.com/api-customers/more-details'
93
- }];
61
+ var LOB_DATA = [
62
+ {
63
+ title: LOBS.FLIGHTS,
64
+ image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Flights.png?cache=true',
65
+ link: '/flights',
66
+ },
67
+ {
68
+ title: LOBS.HOTELS,
69
+ image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Hotels.png?cache=true',
70
+ link: '/hotels',
71
+ },
72
+ {
73
+ title: LOBS.BUSES,
74
+ image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Buses.png?cache=true',
75
+ link: '/bus',
76
+ },
77
+ {
78
+ title: LOBS.PACKAGES,
79
+ image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Packages.png?cache=true',
80
+ link: '/holidays',
81
+ },
82
+ ];
83
+ var bdConfig = [
84
+ {
85
+ title: 'AgentBox',
86
+ subtitle: 'For travel agents',
87
+ details: 'One-stop travel solution offering the best deals to our travel agency partners',
88
+ link: 'https://agency.cleartrip.com',
89
+ },
90
+ {
91
+ title: 'OutOfOffice',
92
+ subtitle: 'For startups, corporates and SMEs',
93
+ details: 'Manage corporate business travel, smartly',
94
+ link: 'https://ooo.cleartrip.com/',
95
+ ravenActionName: 'ooo',
96
+ },
97
+ {
98
+ title: 'MICE',
99
+ subtitle: 'For corporate events',
100
+ details: 'An end-to-end management solution for all your corporate events',
101
+ link: 'https://business.cleartrip.com/',
102
+ },
103
+ {
104
+ title: 'API',
105
+ subtitle: 'For developers',
106
+ details: 'Unlock seamless integration and scale with our powerful, reliable APIs',
107
+ link: 'https://business.cleartrip.com/api-customers/more-details',
108
+ },
109
+ ];
94
110
  var BUSINESS_DROPDOWN_HEADING = 'Other business services';
95
111
  exports.RAVEN_PAGE_NAMES = void 0;
96
112
  (function (RAVEN_PAGE_NAMES) {
97
- RAVEN_PAGE_NAMES["UNIFIED_HOME"] = "unified_homepage";
98
- RAVEN_PAGE_NAMES["HOTELS_HOME"] = "hotel_home";
99
- RAVEN_PAGE_NAMES["FLIGHTS_HOME"] = "flights_home";
113
+ RAVEN_PAGE_NAMES["UNIFIED_HOME"] = "unified_homepage";
114
+ RAVEN_PAGE_NAMES["HOTELS_HOME"] = "hotel_home";
115
+ RAVEN_PAGE_NAMES["FLIGHTS_HOME"] = "flights_home";
100
116
  })(exports.RAVEN_PAGE_NAMES || (exports.RAVEN_PAGE_NAMES = {}));
101
117
  var RAVEN_PLATFORMS;
102
118
  (function (RAVEN_PLATFORMS) {
103
- RAVEN_PLATFORMS["DESKTOP"] = "desktop";
119
+ RAVEN_PLATFORMS["DESKTOP"] = "desktop";
104
120
  })(RAVEN_PLATFORMS || (RAVEN_PLATFORMS = {}));
105
121
  var LOG_IN_TEXT = 'Log in';
106
122
  var THEME_CONFIG = {
107
- NOVAC: {
108
- headerBackground: 'transparent',
109
- hoverColor: '#FDBA12',
110
- logoFill: '#FFF',
111
- fkcompanyColor: '#FFF',
112
- typographyColor: '#FFF',
113
- loginButtonColorVariant: ctDesignButton.ButtonColor.NEUTRAL
114
- },
115
- DEFAULT: {
116
- headerBackground: '#FFFFFF',
117
- hoverColor: '#FF4F17',
118
- logoFill: '#FF4F17',
119
- fkcompanyColor: '#1A1A1A',
120
- typographyColor: '#1A1A1A',
121
- loginButtonColorVariant: ctDesignButton.ButtonColor.PRIMARY
122
- }
123
+ NOVAC: {
124
+ headerBackground: 'transparent',
125
+ hoverColor: '#FDBA12',
126
+ logoFill: '#FFF',
127
+ fkcompanyColor: '#FFF',
128
+ typographyColor: '#FFF',
129
+ loginButtonColorVariant: ctDesignButton.ButtonColor.NEUTRAL,
130
+ },
131
+ DEFAULT: {
132
+ headerBackground: '#FFFFFF',
133
+ hoverColor: '#FF4F17',
134
+ logoFill: '#FF4F17',
135
+ fkcompanyColor: '#1A1A1A',
136
+ typographyColor: '#1A1A1A',
137
+ loginButtonColorVariant: ctDesignButton.ButtonColor.PRIMARY,
138
+ },
123
139
  };
124
140
 
125
141
  var HeaderContext = react.createContext(undefined);
126
142
  var useHeaderContext = function () {
127
- var context = react.useContext(HeaderContext);
128
- if (!context) {
129
- throw new Error('useHeaderContext must be used within a HeaderProvider');
130
- }
131
- return context;
132
- };
133
- var HeaderProvider = function (_a) {
134
- var value = _a.value,
135
- children = _a.children;
136
- return jsxRuntime.jsx(HeaderContext.Provider, tslib.__assign({
137
- value: value
138
- }, {
139
- children: children
140
- }));
141
- };
142
-
143
- var stringifyPayload = function (payload) {
144
- var keys = Object.keys(payload);
145
- var numericValues = [];
146
- keys.forEach(function (key) {
147
- if (numericValues.includes(key)) {
148
- payload[key] = Number(payload[key]);
149
- } else {
150
- payload[key] = '' + payload[key];
143
+ var context = react.useContext(HeaderContext);
144
+ if (!context) {
145
+ throw new Error('useHeaderContext must be used within a HeaderProvider');
151
146
  }
152
- });
153
- return payload;
147
+ return context;
154
148
  };
155
- var isServer = function () {
156
- return typeof window === 'undefined' || !window;
157
- };
158
- var getQueryParam = function (queryParam) {
159
- if (isServer()) {
160
- return '';
161
- }
162
- var urlParams = new URLSearchParams(window.location.search);
163
- return urlParams.get(queryParam);
164
- };
165
- var ravenLoyaltyTypes = function (loyaltyType) {
166
- switch (loyaltyType) {
167
- case 'FkVip':
168
- return 'fk_vip';
169
- case 'FkPremium':
170
- return 'fk_plus_premium';
171
- case 'InsiderIcon':
172
- return 'myntra_insidericon';
173
- case 'InsiderElite':
174
- return 'myntra_insiderelite';
175
- default:
176
- return '';
177
- }
178
- };
179
- var ravenSDKTrigger = function (isUserLoggedIn, eventName, ravenPayload, customRavenPayload, ravenPushCallback, pageName) {
180
- var _a;
181
- if (typeof ravenPushCallback !== 'function') {
182
- console.error('ravenPushCallback is not provided or is not a function');
183
- return;
184
- }
185
- var commonPayload = {
186
- page_name: pageName,
187
- platform: RAVEN_PLATFORMS.DESKTOP,
188
- login_status: isUserLoggedIn ? 'yes' : 'no',
189
- domain: (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.hostname
190
- };
191
- var newRavenPayload = stringifyPayload(ravenPayload);
192
- var parsedCustomRavenPayload = stringifyPayload(customRavenPayload);
193
- var finalPayload = tslib.__assign(tslib.__assign(tslib.__assign({}, commonPayload), newRavenPayload), parsedCustomRavenPayload);
194
- try {
195
- if (ravenPushCallback.length === 1) {
196
- ravenPushCallback({
197
- eventName: eventName,
198
- eventData: finalPayload
199
- });
200
- } else {
201
- ravenPushCallback(eventName, finalPayload);
202
- }
203
- } catch (err) {
204
- console.error(err);
205
- return;
206
- }
149
+ var HeaderProvider = function (_a) {
150
+ var value = _a.value, children = _a.children;
151
+ return jsxRuntime.jsx(HeaderContext.Provider, tslib.__assign({ value: value }, { children: children }));
207
152
  };
208
153
 
209
154
  var LobsHeader = function () {
210
- var _a = useHeaderContext(),
211
- selectedLOB = _a.selectedLOB,
212
- isUserLoggedIn = _a.isUserLoggedIn,
213
- ravenEventName = _a.ravenEventName,
214
- ravenPageName = _a.ravenPageName,
215
- _b = _a.ravenPayload,
216
- ravenPayload = _b === void 0 ? {} : _b,
217
- ravenPushCallback = _a.ravenPushCallback;
218
- var handleClick = function (title, isSelected) {
219
- if (!isSelected) {
220
- var payload = {
221
- action_name: "".concat(title.toLowerCase(), "_tab_click"),
222
- action_type: 'click'
223
- };
224
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
225
- }
226
- };
227
- return jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
228
- display: 'flex',
229
- alignItems: 'center',
230
- justifyContent: 'center',
231
- padding: '16px',
232
- background: '#F7FAFF',
233
- top: '64px',
234
- zIndex: 2,
235
- css: {
236
- gap: 24
237
- }
238
- }, {
239
- children: LOB_DATA.map(function (item, index) {
240
- var title = item.title,
241
- link = item.link,
242
- image = item.image;
243
- var isSelected = selectedLOB === title;
244
- return jsxRuntime.jsx("a", tslib.__assign({
245
- href: isSelected ? undefined : link,
246
- style: {
247
- textDecoration: 'none',
248
- pointerEvents: isSelected ? 'none' : 'auto'
249
- },
250
- onClick: function () {
251
- return handleClick(title, isSelected);
252
- }
253
- }, {
254
- children: jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
255
- display: 'flex',
256
- alignItems: 'center',
257
- width: '116px',
258
- height: '48px',
259
- justifyContent: 'center',
260
- cursor: 'pointer',
261
- css: {
262
- gap: 8,
263
- background: isSelected ? '#FFFFFF' : 'transparent',
264
- border: isSelected ? '1px solid #E6E6E6' : '',
265
- borderRadius: '40px',
266
- padding: '8px 16px 8px 8px',
267
- transition: 'background 0.2s ease'
268
- }
269
- }, {
270
- children: [jsxRuntime.jsx("img", {
271
- src: image,
272
- alt: title,
273
- width: 32,
274
- height: 32
275
- }), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
276
- variant: isSelected ? ctDesignTypography.TypographyVariant.HM3 : ctDesignTypography.TypographyVariant.B1,
277
- isClickable: true
278
- }, {
279
- children: title
280
- }))]
281
- }))
282
- }), index);
283
- })
284
- }));
155
+ var selectedLOB = useHeaderContext().selectedLOB;
156
+ return (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px', background: '#F7FAFF', top: '64px', zIndex: 2, css: {
157
+ gap: 24,
158
+ } }, { children: LOB_DATA.map(function (item, index) {
159
+ var title = item.title, link = item.link, image = item.image;
160
+ var isSelected = selectedLOB === title;
161
+ return (jsxRuntime.jsx("a", tslib.__assign({ href: isSelected ? undefined : link, style: { textDecoration: 'none', pointerEvents: isSelected ? 'none' : 'auto' } }, { children: jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', alignItems: 'center', width: '116px', height: '48px', justifyContent: 'center', cursor: 'pointer', css: {
162
+ gap: 8,
163
+ background: isSelected ? '#FFFFFF' : 'transparent',
164
+ border: isSelected ? '1px solid #E6E6E6' : '',
165
+ borderRadius: '40px',
166
+ padding: '8px 16px 8px 8px',
167
+ transition: 'background 0.2s ease',
168
+ } }, { children: [jsxRuntime.jsx("img", { src: image, alt: title, width: 32, height: 32 }), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: isSelected ? ctDesignTypography.TypographyVariant.HM3 : ctDesignTypography.TypographyVariant.B1, isClickable: true }, { children: title }))] }), index) })));
169
+ }) })));
285
170
  };
286
171
 
287
172
  var useDelayedUnmount = function (show, unmountDelay) {
288
- var _a = react.useState(show),
289
- showComponent = _a[0],
290
- setShowComponent = _a[1];
291
- var timerRef = react.useRef();
292
- react.useEffect(function () {
293
- if (!show) {
294
- timerRef.current = setTimeout(function () {
295
- setShowComponent(false);
296
- }, unmountDelay);
297
- } else {
298
- setShowComponent(show);
299
- }
300
- return function () {
301
- (timerRef === null || timerRef === void 0 ? void 0 : timerRef.current) && clearTimeout(timerRef.current);
302
- };
303
- }, [show]);
304
- return showComponent;
173
+ var _a = react.useState(show), showComponent = _a[0], setShowComponent = _a[1];
174
+ var timerRef = react.useRef();
175
+ react.useEffect(function () {
176
+ if (!show) {
177
+ timerRef.current = setTimeout(function () {
178
+ setShowComponent(false);
179
+ }, unmountDelay);
180
+ }
181
+ else {
182
+ setShowComponent(show);
183
+ }
184
+ return function () {
185
+ (timerRef === null || timerRef === void 0 ? void 0 : timerRef.current) && clearTimeout(timerRef.current);
186
+ };
187
+ }, [show]);
188
+ return showComponent;
305
189
  };
306
190
  var useMountTransition = function (isMounted, unmountDelay) {
307
- var _a = react.useState(false),
308
- hasTransitionedIn = _a[0],
309
- setHasTransitionedIn = _a[1];
310
- var timeoutIdRef = react.useRef();
311
- react.useEffect(function () {
312
- if (isMounted && !hasTransitionedIn) {
313
- setTimeout(function () {
314
- setHasTransitionedIn(true);
315
- }, 0);
316
- } else if (!isMounted && hasTransitionedIn) {
317
- timeoutIdRef.current = setTimeout(function () {
318
- return setHasTransitionedIn(false);
319
- }, unmountDelay);
320
- }
321
- return function () {
322
- if (timeoutIdRef && timeoutIdRef.current) {
323
- clearTimeout(timeoutIdRef.current);
324
- }
325
- };
326
- }, [unmountDelay, isMounted]);
327
- return hasTransitionedIn;
191
+ var _a = react.useState(false), hasTransitionedIn = _a[0], setHasTransitionedIn = _a[1];
192
+ var timeoutIdRef = react.useRef();
193
+ react.useEffect(function () {
194
+ if (isMounted && !hasTransitionedIn) {
195
+ setTimeout(function () {
196
+ setHasTransitionedIn(true);
197
+ }, 0);
198
+ }
199
+ else if (!isMounted && hasTransitionedIn) {
200
+ timeoutIdRef.current = setTimeout(function () { return setHasTransitionedIn(false); }, unmountDelay);
201
+ }
202
+ return function () {
203
+ if (timeoutIdRef && timeoutIdRef.current) {
204
+ clearTimeout(timeoutIdRef.current);
205
+ }
206
+ };
207
+ }, [unmountDelay, isMounted]);
208
+ return hasTransitionedIn;
328
209
  };
329
210
 
330
211
  function HeaderAnimatedMask(_a) {
331
- var children = _a.children,
332
- onMaskClick = _a.onMaskClick,
333
- show = _a.show,
334
- marginTop = _a.marginTop,
335
- handleDropdownMouseEnter = _a.handleDropdownMouseEnter,
336
- handleDropdownMouseLeave = _a.handleDropdownMouseLeave;
337
- react.useEffect(function () {
338
- if (show) {
339
- document.body.style.overflow = 'hidden';
340
- }
341
- return function () {
342
- document.body.style.overflow = 'initial';
343
- };
344
- }, [show]);
345
- var showFlagProxy = useDelayedUnmount(show, 300);
346
- var triggerTransition = useMountTransition(show, 100);
347
- var triggerOpenTransition = triggerTransition;
348
- return jsxRuntime.jsxs(jsxRuntime.Fragment, {
349
- children: [showFlagProxy && jsxRuntime.jsx(ctDesignContainer.Container, {
350
- id: 'mask-container',
351
- css: {
352
- position: 'fixed',
353
- backgroundColor: '#000',
354
- opacity: triggerOpenTransition ? 0.4 : 0,
355
- width: '100%',
356
- height: '100vh',
357
- left: 0,
358
- top: marginTop || 0,
359
- zIndex: 9,
360
- transition: 'opacity 300ms ease-in'
361
- },
362
- onClick: onMaskClick
363
- }), showFlagProxy && jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
364
- onMouseEnter: handleDropdownMouseEnter,
365
- onMouseLeave: handleDropdownMouseLeave
366
- }, {
367
- children: children
368
- }))]
369
- });
212
+ var children = _a.children, onMaskClick = _a.onMaskClick, show = _a.show, marginTop = _a.marginTop, handleDropdownMouseEnter = _a.handleDropdownMouseEnter, handleDropdownMouseLeave = _a.handleDropdownMouseLeave;
213
+ react.useEffect(function () {
214
+ if (show) {
215
+ document.body.style.overflow = 'hidden';
216
+ }
217
+ return function () {
218
+ document.body.style.overflow = 'initial';
219
+ };
220
+ }, [show]);
221
+ var showFlagProxy = useDelayedUnmount(show, 300);
222
+ var triggerTransition = useMountTransition(show, 100);
223
+ var triggerOpenTransition = triggerTransition;
224
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showFlagProxy && (jsxRuntime.jsx(ctDesignContainer.Container, { id: 'mask-container', css: {
225
+ position: 'fixed',
226
+ backgroundColor: '#000',
227
+ opacity: triggerOpenTransition ? 0.4 : 0,
228
+ width: '100%',
229
+ height: '100vh',
230
+ left: 0,
231
+ top: marginTop || 0,
232
+ zIndex: 9,
233
+ transition: 'opacity 300ms ease-in',
234
+ }, onClick: onMaskClick })), showFlagProxy && (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ onMouseEnter: handleDropdownMouseEnter, onMouseLeave: handleDropdownMouseLeave }, { children: children })))] }));
370
235
  }
371
236
 
372
237
  var MIN_CLOSE_DELAY = 150;
373
238
  var useHoverDropdown = function (_a) {
374
- var _b = _a === void 0 ? {} : _a,
375
- _c = _b.closeDelay,
376
- closeDelayArg = _c === void 0 ? 0 : _c,
377
- _d = _b.openDelay,
378
- openDelay = _d === void 0 ? 500 : _d;
379
- var closeDelay = Math.max(closeDelayArg, MIN_CLOSE_DELAY);
380
- var _e = react.useState(false),
381
- isDropdownVisible = _e[0],
382
- setIsDropdownVisible = _e[1];
383
- var _f = react.useState(null),
384
- hoveredElemIndex = _f[0],
385
- setHoveredElemIndex = _f[1];
386
- var timeoutRef = react.useRef(null);
387
- var openTimeoutRef = react.useRef(null);
388
- var cancelElementHover = react.useRef(false);
389
- var handleOnMouseEnter = react.useCallback(function (index) {
390
- if (timeoutRef.current) clearTimeout(timeoutRef.current);
391
- if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current);
392
- cancelElementHover.current = false;
393
- openTimeoutRef.current = setTimeout(function () {
394
- setIsDropdownVisible(true);
395
- if (!cancelElementHover.current) {
396
- setHoveredElemIndex(index);
397
- }
398
- }, openDelay);
399
- }, [openDelay]);
400
- var handleOnMouseLeave = react.useCallback(function () {
401
- cancelElementHover.current = true;
402
- timeoutRef.current = setTimeout(function () {
403
- setIsDropdownVisible(false);
404
- setHoveredElemIndex(null);
405
- }, closeDelay);
406
- }, [closeDelay]);
407
- var handleDropdownMouseEnter = react.useCallback(function () {
408
- if (timeoutRef.current) clearTimeout(timeoutRef.current);
409
- }, []);
410
- var handleDropdownMouseLeave = react.useCallback(function () {
411
- cancelElementHover.current = true;
412
- (timeoutRef === null || timeoutRef === void 0 ? void 0 : timeoutRef.current) && clearTimeout(timeoutRef.current);
413
- timeoutRef.current = setTimeout(function () {
414
- setIsDropdownVisible(false);
415
- setHoveredElemIndex(null);
416
- }, closeDelay);
417
- }, []);
418
- react.useEffect(function () {
419
- var handleMouseLeaveWindow = function (event) {
420
- if (event.clientY <= 0) {
421
- setIsDropdownVisible(false);
422
- setHoveredElemIndex(null);
423
- }
424
- };
425
- window.addEventListener('mouseleave', handleMouseLeaveWindow);
426
- return function () {
427
- window.removeEventListener('mouseleave', handleMouseLeaveWindow);
239
+ var _b = _a === void 0 ? {} : _a, _c = _b.closeDelay, closeDelayArg = _c === void 0 ? 0 : _c, _d = _b.openDelay, openDelay = _d === void 0 ? 500 : _d;
240
+ var closeDelay = Math.max(closeDelayArg, MIN_CLOSE_DELAY);
241
+ var _e = react.useState(false), isDropdownVisible = _e[0], setIsDropdownVisible = _e[1];
242
+ var _f = react.useState(null), hoveredElemIndex = _f[0], setHoveredElemIndex = _f[1];
243
+ var timeoutRef = react.useRef(null);
244
+ var openTimeoutRef = react.useRef(null);
245
+ var cancelElementHover = react.useRef(false);
246
+ var handleOnMouseEnter = react.useCallback(function (index) {
247
+ if (timeoutRef.current)
248
+ clearTimeout(timeoutRef.current);
249
+ if (openTimeoutRef.current)
250
+ clearTimeout(openTimeoutRef.current);
251
+ cancelElementHover.current = false;
252
+ openTimeoutRef.current = setTimeout(function () {
253
+ setIsDropdownVisible(true);
254
+ if (!cancelElementHover.current) {
255
+ setHoveredElemIndex(index);
256
+ }
257
+ }, openDelay);
258
+ }, [openDelay]);
259
+ var handleOnMouseLeave = react.useCallback(function () {
260
+ cancelElementHover.current = true;
261
+ timeoutRef.current = setTimeout(function () {
262
+ setIsDropdownVisible(false);
263
+ setHoveredElemIndex(null);
264
+ }, closeDelay);
265
+ }, [closeDelay]);
266
+ var handleDropdownMouseEnter = react.useCallback(function () {
267
+ if (timeoutRef.current)
268
+ clearTimeout(timeoutRef.current);
269
+ }, []);
270
+ var handleDropdownMouseLeave = react.useCallback(function () {
271
+ cancelElementHover.current = true;
272
+ (timeoutRef === null || timeoutRef === void 0 ? void 0 : timeoutRef.current) && clearTimeout(timeoutRef.current);
273
+ timeoutRef.current = setTimeout(function () {
274
+ setIsDropdownVisible(false);
275
+ setHoveredElemIndex(null);
276
+ }, closeDelay);
277
+ }, []);
278
+ react.useEffect(function () {
279
+ var handleMouseLeaveWindow = function (event) {
280
+ if (event.clientY <= 0) {
281
+ setIsDropdownVisible(false);
282
+ setHoveredElemIndex(null);
283
+ }
284
+ };
285
+ window.addEventListener('mouseleave', handleMouseLeaveWindow);
286
+ return function () {
287
+ window.removeEventListener('mouseleave', handleMouseLeaveWindow);
288
+ };
289
+ }, []);
290
+ return {
291
+ isDropdownVisible: isDropdownVisible,
292
+ hoveredElemIndex: hoveredElemIndex,
293
+ handleOnMouseEnter: handleOnMouseEnter,
294
+ handleOnMouseLeave: handleOnMouseLeave,
295
+ handleDropdownMouseEnter: handleDropdownMouseEnter,
296
+ handleDropdownMouseLeave: handleDropdownMouseLeave,
428
297
  };
429
- }, []);
430
- return {
431
- isDropdownVisible: isDropdownVisible,
432
- hoveredElemIndex: hoveredElemIndex,
433
- handleOnMouseEnter: handleOnMouseEnter,
434
- handleOnMouseLeave: handleOnMouseLeave,
435
- handleDropdownMouseEnter: handleDropdownMouseEnter,
436
- handleDropdownMouseLeave: handleDropdownMouseLeave
437
- };
438
298
  };
439
299
 
440
300
  var useDropdownAnimation = function (isOpen) {
441
- var containerRef = react.useRef(null);
442
- var openDropdown = function () {
443
- if (containerRef.current) {
444
- var fullHeight_1 = containerRef.current.scrollHeight;
445
- containerRef.current.style.maxHeight = "".concat(fullHeight_1 / 2, "px");
446
- containerRef.current.style.opacity = '0';
447
- requestAnimationFrame(function () {
301
+ var containerRef = react.useRef(null);
302
+ var openDropdown = function () {
448
303
  if (containerRef.current) {
449
- containerRef.current.style.transition = 'max-height 0.3s ease-in-out, opacity 0.3s ease-in-out';
450
- containerRef.current.style.maxHeight = "".concat(fullHeight_1, "px");
451
- containerRef.current.style.opacity = '1';
304
+ var fullHeight_1 = containerRef.current.scrollHeight;
305
+ containerRef.current.style.maxHeight = "".concat(fullHeight_1 / 2, "px");
306
+ containerRef.current.style.opacity = '0';
307
+ requestAnimationFrame(function () {
308
+ if (containerRef.current) {
309
+ containerRef.current.style.transition = 'max-height 0.3s ease-in-out, opacity 0.3s ease-in-out';
310
+ containerRef.current.style.maxHeight = "".concat(fullHeight_1, "px");
311
+ containerRef.current.style.opacity = '1';
312
+ }
313
+ });
452
314
  }
453
- });
454
- }
455
- };
456
- var closeDropdown = function () {
457
- if (containerRef.current) {
458
- var fullHeight = containerRef.current.scrollHeight;
459
- containerRef.current.style.transition = 'max-height 0.3s ease-in-out, opacity 0.3s ease-in-out';
460
- containerRef.current.style.maxHeight = "".concat(fullHeight / 2, "px");
461
- containerRef.current.style.opacity = '0';
462
- setTimeout(function () {
315
+ };
316
+ var closeDropdown = function () {
463
317
  if (containerRef.current) {
464
- containerRef.current.style.maxHeight = '0px';
318
+ var fullHeight = containerRef.current.scrollHeight;
319
+ containerRef.current.style.transition = 'max-height 0.3s ease-in-out, opacity 0.3s ease-in-out';
320
+ containerRef.current.style.maxHeight = "".concat(fullHeight / 2, "px");
321
+ containerRef.current.style.opacity = '0';
322
+ setTimeout(function () {
323
+ if (containerRef.current) {
324
+ containerRef.current.style.maxHeight = '0px';
325
+ }
326
+ }, 300);
327
+ }
328
+ };
329
+ react.useEffect(function () {
330
+ if (isOpen) {
331
+ openDropdown();
332
+ }
333
+ else {
334
+ closeDropdown();
335
+ }
336
+ }, [isOpen]);
337
+ return { containerRef: containerRef };
338
+ };
339
+
340
+ var stringifyPayload = function (payload) {
341
+ var keys = Object.keys(payload);
342
+ var numericValues = [];
343
+ keys.forEach(function (key) {
344
+ if (numericValues.includes(key)) {
345
+ payload[key] = Number(payload[key]);
346
+ }
347
+ else {
348
+ payload[key] = '' + payload[key];
349
+ }
350
+ });
351
+ return payload;
352
+ };
353
+ var isServer = function () {
354
+ return typeof window === 'undefined' || !window;
355
+ };
356
+ var getQueryParam = function (queryParam) {
357
+ if (isServer()) {
358
+ return '';
359
+ }
360
+ var urlParams = new URLSearchParams(window.location.search);
361
+ return urlParams.get(queryParam);
362
+ };
363
+ var ravenLoyaltyTypes = function (loyaltyType) {
364
+ switch (loyaltyType) {
365
+ case 'FkVip':
366
+ return 'fk_vip';
367
+ case 'FkPremium':
368
+ return 'fk_plus_premium';
369
+ case 'InsiderIcon':
370
+ return 'myntra_insidericon';
371
+ case 'InsiderElite':
372
+ return 'myntra_insiderelite';
373
+ default:
374
+ return '';
375
+ }
376
+ };
377
+ var ravenSDKTrigger = function (isUserLoggedIn, eventName, ravenPayload, customRavenPayload, ravenPushCallback, pageName) {
378
+ var _a;
379
+ if (typeof ravenPushCallback !== 'function') {
380
+ console.error('ravenPushCallback is not provided or is not a function');
381
+ return;
382
+ }
383
+ var commonPayload = {
384
+ page_name: pageName,
385
+ platform: RAVEN_PLATFORMS.DESKTOP,
386
+ login_status: isUserLoggedIn ? 'yes' : 'no',
387
+ domain: (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.host,
388
+ };
389
+ var newRavenPayload = stringifyPayload(ravenPayload);
390
+ var parsedCustomRavenPayload = stringifyPayload(customRavenPayload);
391
+ var finalPayload = tslib.__assign(tslib.__assign(tslib.__assign({}, commonPayload), newRavenPayload), parsedCustomRavenPayload);
392
+ try {
393
+ if (ravenPushCallback.length === 1) {
394
+ ravenPushCallback({ eventName: eventName, eventData: finalPayload });
395
+ }
396
+ else {
397
+ ravenPushCallback(eventName, finalPayload);
465
398
  }
466
- }, 300);
467
399
  }
468
- };
469
- react.useEffect(function () {
470
- if (isOpen) {
471
- openDropdown();
472
- } else {
473
- closeDropdown();
400
+ catch (err) {
401
+ console.error(err);
402
+ return;
474
403
  }
475
- }, [isOpen]);
476
- return {
477
- containerRef: containerRef
478
- };
479
404
  };
480
405
 
481
406
  var accountOptionHoverStyles = {
482
- transition: 'background-color 0.2s ease-in-out',
483
- '&:hover': {
484
- backgroundColor: '#ECF3FF'
485
- }
407
+ transition: 'background-color 0.2s ease-in-out',
408
+ '&:hover': {
409
+ backgroundColor: '#ECF3FF',
410
+ },
486
411
  };
487
412
  var logoutButtonHoverStyles = {
488
- transition: 'background-color 0.2s ease-in-out',
489
- '&:hover': {
490
- backgroundColor: '#FBEFEF'
491
- }
413
+ transition: 'background-color 0.2s ease-in-out',
414
+ '&:hover': {
415
+ backgroundColor: '#FBEFEF',
416
+ },
492
417
  };
493
- var moveRight = styled.keyframes(templateObject_1$1 || (templateObject_1$1 = tslib.__makeTemplateObject(["\n from {\n transform: translateX(-20px);\n }\n to {\n transform: translateX(0px);\n }\n"], ["\n from {\n transform: translateX(-20px);\n }\n to {\n transform: translateX(0px);\n }\n"])));
494
- var moveRightAgain = styled.keyframes(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n from {\n transform: translateX(-20.01px);\n }\n to {\n transform: translateX(0px);\n }\n"], ["\n from {\n transform: translateX(-20.01px);\n }\n to {\n transform: translateX(0px);\n }\n"])));
418
+ var moveRight = react$1.keyframes(templateObject_1$1 || (templateObject_1$1 = tslib.__makeTemplateObject(["\n from {\n transform: translateX(-20px);\n }\n to {\n transform: translateX(0px);\n }\n"], ["\n from {\n transform: translateX(-20px);\n }\n to {\n transform: translateX(0px);\n }\n"])));
419
+ var moveRightAgain = react$1.keyframes(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n from {\n transform: translateX(-20.01px);\n }\n to {\n transform: translateX(0px);\n }\n"], ["\n from {\n transform: translateX(-20.01px);\n }\n to {\n transform: translateX(0px);\n }\n"])));
495
420
  var arrowContainerStyles = {
496
- display: 'flex',
497
- backgroundColor: 'black',
498
- transition: 'background-color 200ms ease',
499
- 'flex-direction': 'row',
500
- justifyContent: 'center',
501
- width: '20px',
502
- height: '20px',
503
- overflow: 'hidden',
504
- borderRadius: '50%'
421
+ display: 'flex',
422
+ backgroundColor: 'black',
423
+ transition: 'background-color 200ms ease',
424
+ 'flex-direction': 'row',
425
+ justifyContent: 'center',
426
+ width: '20px',
427
+ height: '20px',
428
+ overflow: 'hidden',
429
+ borderRadius: '50%',
505
430
  };
506
431
  var getLoginButtonBgColorStyles = function (saleThemeEnabled) {
507
- if (saleThemeEnabled) {
508
- return {
509
- backgroundColor: 'transparent !important',
510
- '&:hover': {
511
- backgroundColor: 'rgba(255, 255, 255, 0.25)!important'
512
- }
513
- };
514
- } else {
515
- return {
516
- backgroundColor: 'transparent !important',
517
- '&:hover': {
518
- backgroundColor: '#F3F3F3 !important'
519
- }
520
- };
521
- }
432
+ if (saleThemeEnabled) {
433
+ return {
434
+ backgroundColor: 'transparent !important',
435
+ '&:hover': {
436
+ backgroundColor: 'rgba(255, 255, 255, 0.25)!important',
437
+ },
438
+ };
439
+ }
440
+ else {
441
+ return {
442
+ backgroundColor: 'transparent !important',
443
+ '&:hover': {
444
+ backgroundColor: '#F3F3F3 !important',
445
+ },
446
+ };
447
+ }
522
448
  };
523
449
  var templateObject_1$1, templateObject_2;
524
450
 
525
451
  var AnimatedArrow = function () {
526
- return jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
527
- className: 'bd-arrow-container-js',
528
- css: arrowContainerStyles
529
- }, {
530
- children: tslib.__spreadArray([], Array(3), true).map(function (_, index) {
531
- return jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
532
- className: 'bd-arrow-wrapper-js',
533
- display: 'flex',
534
- alignItems: 'center'
535
- }, {
536
- children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {})
537
- }), index);
538
- })
539
- }));
452
+ return (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ className: 'bd-arrow-container-js', css: arrowContainerStyles }, { children: tslib.__spreadArray([], Array(3), true).map(function (_, index) { return (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ className: 'bd-arrow-wrapper-js', display: 'flex', alignItems: 'center' }, { children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {}) }), index)); }) })));
540
453
  };
541
- var BDHoverContainer = /*#__PURE__*/styled__default.default.div.withConfig({
542
- displayName: "BusinessDropdown__BDHoverContainer",
543
- componentId: "sc-1tsshe4-0"
544
- })(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n cursor: pointer;\n width: 200px;\n &:hover {\n .bd-arrow-container-js {\n background-color: rgba(255, 79, 23, 1);\n transition: color 200ms ease;\n }\n .bd-arrow-wrapper-js {\n animation: ", " 200ms linear;\n display: flex;\n }\n .color-orange-on-hover-js {\n color: rgba(255, 79, 23, 1);\n transition: background-color 200ms ease;\n }\n }\n &:not(:hover) .bd-arrow-wrapper-js {\n animation: ", " 200ms linear backwards;\n }\n"], ["\n cursor: pointer;\n width: 200px;\n &:hover {\n .bd-arrow-container-js {\n background-color: rgba(255, 79, 23, 1);\n transition: color 200ms ease;\n }\n .bd-arrow-wrapper-js {\n animation: ", " 200ms linear;\n display: flex;\n }\n .color-orange-on-hover-js {\n color: rgba(255, 79, 23, 1);\n transition: background-color 200ms ease;\n }\n }\n &:not(:hover) .bd-arrow-wrapper-js {\n animation: ", " 200ms linear backwards;\n }\n"])), moveRight, moveRightAgain);
454
+ var BDHoverContainer = styled__default.default.div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n cursor: pointer;\n width: 200px;\n &:hover {\n .bd-arrow-container-js {\n background-color: rgba(255, 79, 23, 1);\n transition: color 200ms ease;\n }\n .bd-arrow-wrapper-js {\n animation: ", " 200ms linear;\n display: flex;\n }\n .color-orange-on-hover-js {\n color: rgba(255, 79, 23, 1);\n transition: background-color 200ms ease;\n }\n }\n &:not(:hover) .bd-arrow-wrapper-js {\n animation: ", " 200ms linear backwards;\n }\n"], ["\n cursor: pointer;\n width: 200px;\n &:hover {\n .bd-arrow-container-js {\n background-color: rgba(255, 79, 23, 1);\n transition: color 200ms ease;\n }\n .bd-arrow-wrapper-js {\n animation: ", " 200ms linear;\n display: flex;\n }\n .color-orange-on-hover-js {\n color: rgba(255, 79, 23, 1);\n transition: background-color 200ms ease;\n }\n }\n &:not(:hover) .bd-arrow-wrapper-js {\n animation: ", " 200ms linear backwards;\n }\n"])), moveRight, moveRightAgain);
545
455
  var BusinessDropdownContent = function (_a) {
546
- var isOpen = _a.isOpen;
547
- var _b = useHeaderContext(),
548
- isUserLoggedIn = _b.isUserLoggedIn,
549
- ravenPushCallback = _b.ravenPushCallback,
550
- ravenPageName = _b.ravenPageName,
551
- ravenEventName = _b.ravenEventName,
552
- loyaltyType = _b.loyaltyType,
553
- _c = _b.ravenPayload,
554
- ravenPayload = _c === void 0 ? {} : _c;
555
- var _d = react.useState(0),
556
- leftPosition = _d[0],
557
- setLeftPosition = _d[1];
558
- var containerRef = useDropdownAnimation(isOpen).containerRef;
559
- react.useEffect(function () {
560
- var updatePosition = function () {
561
- if (containerRef.current) {
562
- var screenWidth = window.innerWidth;
563
- var containerWidth = containerRef.current.offsetWidth || 0;
564
- var newLeft = (screenWidth - containerWidth) / 2;
565
- if (newLeft !== leftPosition) {
566
- setLeftPosition(newLeft);
567
- }
568
- }
569
- };
570
- updatePosition();
571
- window.addEventListener('resize', updatePosition);
572
- return function () {
573
- return window.removeEventListener('resize', updatePosition);
574
- };
575
- }, [containerRef, leftPosition]);
576
- var handleBusinessDropdownClick = react.useCallback(function (link, title, ravenActionName) {
577
- var _a;
578
- var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
579
- var actionName = ravenActionName ? "".concat(ravenActionName, "_business_click") : title ? "".concat(title.toLowerCase(), "_business_click") : '';
580
- var defaultPayload = {
581
- action_name: actionName,
582
- action_type: 'click',
583
- u_utm_source: utmSource,
584
- loyalty_type: ravenLoyaltyTypes(loyaltyType)
585
- };
586
- if (link) {
587
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
588
- window.location.href = link;
589
- }
590
- }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, loyaltyType]);
591
- return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
592
- ref: containerRef,
593
- backgroundColor: '#fff',
594
- top: '76px',
595
- position: 'fixed',
596
- left: "".concat(leftPosition, "px"),
597
- borderRadius: 24,
598
- boxShadow: '0px 8px 24px 0px rgba(26, 26, 26, 0.10)',
599
- width: 'fit-content',
600
- zIndex: 1002,
601
- css: {
602
- overflow: 'hidden',
603
- opacity: 0
604
- }
605
- }, {
606
- children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
607
- padding: '20px 24px 20px 24px',
608
- backgroundColor: '#FFF1EC'
609
- }, {
610
- children: jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
611
- variant: 'HM2'
612
- }, {
613
- children: BUSINESS_DROPDOWN_HEADING
614
- }))
615
- })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
616
- display: 'flex',
617
- flexDirection: 'row',
618
- padding: '24px',
619
- columnGap: '48px',
620
- width: 'fit-content'
621
- }, {
622
- children: bdConfig.map(function (_a) {
623
- var title = _a.title,
624
- subtitle = _a.subtitle,
625
- details = _a.details,
626
- link = _a.link,
627
- ravenActionName = _a.ravenActionName;
628
- return jsxRuntime.jsxs(BDHoverContainer, tslib.__assign({
629
- className: 'bd-hover-container-js',
630
- onClick: function () {
631
- return handleBusinessDropdownClick(link, title, ravenActionName);
632
- }
633
- }, {
634
- children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
635
- display: 'flex',
636
- flexDirection: 'column',
637
- rowGap: '4px'
638
- }, {
639
- children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
640
- display: 'flex',
641
- flexDirection: 'row',
642
- alignItems: 'center',
643
- columnGap: '8px'
644
- }, {
645
- children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
646
- variant: 'HM2',
647
- className: 'color-orange-on-hover-js',
648
- css: {
649
- transition: 'color 200ms ease'
456
+ var isOpen = _a.isOpen;
457
+ var _b = useHeaderContext(), isUserLoggedIn = _b.isUserLoggedIn, ravenPushCallback = _b.ravenPushCallback, ravenPageName = _b.ravenPageName, ravenEventName = _b.ravenEventName, loyaltyType = _b.loyaltyType, _c = _b.ravenPayload, ravenPayload = _c === void 0 ? {} : _c;
458
+ var _d = react.useState(0), leftPosition = _d[0], setLeftPosition = _d[1];
459
+ var containerRef = useDropdownAnimation(isOpen).containerRef;
460
+ react.useEffect(function () {
461
+ var updatePosition = function () {
462
+ if (containerRef.current) {
463
+ var screenWidth = window.innerWidth;
464
+ var containerWidth = containerRef.current.offsetWidth || 0;
465
+ var newLeft = (screenWidth - containerWidth) / 2;
466
+ if (newLeft !== leftPosition) {
467
+ setLeftPosition(newLeft);
650
468
  }
651
- }, {
652
- children: title
653
- })), jsxRuntime.jsx(AnimatedArrow, {})]
654
- })), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
655
- variant: 'B3',
656
- css: {
657
- marginTop: '4px',
658
- opacity: 0.75
659
- }
660
- }, {
661
- children: subtitle
662
- }))]
663
- })), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
664
- variant: 'P3',
665
- color: 'subheading',
666
- css: {
667
- marginTop: '12px'
668
469
  }
669
- }, {
670
- children: details
671
- }))]
672
- }), title);
673
- })
674
- }))]
675
- }));
470
+ };
471
+ updatePosition();
472
+ window.addEventListener('resize', updatePosition);
473
+ return function () { return window.removeEventListener('resize', updatePosition); };
474
+ }, [containerRef, leftPosition]);
475
+ var handleBusinessDropdownClick = react.useCallback(function (link, title, ravenActionName) {
476
+ var _a;
477
+ var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
478
+ var actionName = ravenActionName
479
+ ? "".concat(ravenActionName, "_business_click")
480
+ : title
481
+ ? "".concat(title.toLowerCase(), "_business_click")
482
+ : '';
483
+ var defaultPayload = {
484
+ action_name: actionName,
485
+ action_type: 'click',
486
+ u_utm_source: utmSource,
487
+ loyalty_type: ravenLoyaltyTypes(loyaltyType),
488
+ };
489
+ if (link) {
490
+ ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
491
+ window.location.href = link;
492
+ }
493
+ }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, loyaltyType]);
494
+ return (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ ref: containerRef, backgroundColor: '#fff', top: '76px', position: 'fixed', left: "".concat(leftPosition, "px"), borderRadius: 24, boxShadow: '0px 8px 24px 0px rgba(26, 26, 26, 0.10)', width: 'fit-content', zIndex: 1002, css: {
495
+ overflow: 'hidden',
496
+ opacity: 0,
497
+ } }, { children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ padding: '20px 24px 20px 24px', backgroundColor: '#FFF1EC' }, { children: jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'HM2' }, { children: BUSINESS_DROPDOWN_HEADING })) })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ display: 'flex', flexDirection: 'row', padding: '24px', columnGap: '48px', width: 'fit-content' }, { children: bdConfig.map(function (_a) {
498
+ var title = _a.title, subtitle = _a.subtitle, details = _a.details, link = _a.link, ravenActionName = _a.ravenActionName;
499
+ return (jsxRuntime.jsxs(BDHoverContainer, tslib.__assign({ className: 'bd-hover-container-js', onClick: function () { return handleBusinessDropdownClick(link, title, ravenActionName); } }, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', flexDirection: 'column', rowGap: '4px' }, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', flexDirection: 'row', alignItems: 'center', columnGap: '8px' }, { children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'HM2', className: 'color-orange-on-hover-js', css: { transition: 'color 200ms ease' } }, { children: title })), jsxRuntime.jsx(AnimatedArrow, {})] })), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'B3', css: { marginTop: '4px', opacity: 0.75 } }, { children: subtitle }))] })), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'P3', color: 'subheading', css: { marginTop: '12px' } }, { children: details }))] }), title));
500
+ }) }))] })));
676
501
  };
677
502
  var templateObject_1;
678
503
 
679
- var ACCOUNT_OPTIONS_POPUP_CONFIG = [{
680
- text: 'My Profile',
681
- icon: jsxRuntime.jsx(ctDesignIcons.MyAccount, {
682
- width: 24,
683
- height: 24
684
- }),
685
- redirectionLink: '/accounts/profile'
686
- }, {
687
- text: 'My Trips',
688
- icon: jsxRuntime.jsx(ctDesignIcons.MyTrips, {
689
- width: 24,
690
- height: 24
691
- }),
692
- redirectionLink: '/accounts/trips'
693
- }, {
694
- text: 'Saved Cards',
695
- icon: jsxRuntime.jsx(ctDesignIcons.SavedCard, {}),
696
- redirectionLink: '/accounts/expressway'
697
- }, {
698
- text: 'Saved Travellers',
699
- icon: jsxRuntime.jsx(ctDesignIcons.Travellers, {
700
- width: 24,
701
- height: 24
702
- }),
703
- redirectionLink: '/account/travellers'
704
- }, {
705
- text: 'Hi-Five',
706
- icon: jsxRuntime.jsx(ctDesignIcons.HiFive, {}),
707
- redirectionLink: '/accounts/hi-five?src=fh'
708
- }, {
709
- text: 'Wallet',
710
- icon: jsxRuntime.jsx(ctDesignIcons.Wallet, {
711
- width: 24,
712
- height: 24
713
- }),
714
- redirectionLink: '/accounts/wallet'
715
- }, {
716
- text: 'Settings',
717
- icon: jsxRuntime.jsx(ctDesignIcons.SettingsCog, {
718
- width: 24,
719
- height: 24
720
- }),
721
- redirectionLink: '/account/settings'
722
- }, {
723
- text: 'Privacy Rights',
724
- icon: jsxRuntime.jsx(ctDesignIcons.PrivacyRights, {}),
725
- redirectionLink: 'accounts/personal-data-dashboard'
726
- }];
504
+ var ACCOUNT_OPTIONS_POPUP_CONFIG = [
505
+ {
506
+ text: 'My Profile',
507
+ icon: jsxRuntime.jsx(ctDesignIcons.MyAccount, { width: 24, height: 24 }),
508
+ redirectionLink: '/accounts/profile',
509
+ },
510
+ {
511
+ text: 'My Trips',
512
+ icon: jsxRuntime.jsx(ctDesignIcons.MyTrips, { width: 24, height: 24 }),
513
+ redirectionLink: '/accounts/trips',
514
+ },
515
+ {
516
+ text: 'Saved Cards',
517
+ icon: jsxRuntime.jsx(ctDesignIcons.SavedCard, {}),
518
+ redirectionLink: '/accounts/expressway',
519
+ },
520
+ {
521
+ text: 'Saved Travellers',
522
+ icon: jsxRuntime.jsx(ctDesignIcons.Travellers, { width: 24, height: 24 }),
523
+ redirectionLink: '/account/travellers',
524
+ },
525
+ {
526
+ text: 'Hi-Five',
527
+ icon: jsxRuntime.jsx(ctDesignIcons.HiFive, {}),
528
+ redirectionLink: '/accounts/hi-five?src=fh',
529
+ },
530
+ {
531
+ text: 'Wallet',
532
+ icon: jsxRuntime.jsx(ctDesignIcons.Wallet, { width: 24, height: 24 }),
533
+ redirectionLink: '/accounts/wallet',
534
+ },
535
+ {
536
+ text: 'Settings',
537
+ icon: jsxRuntime.jsx(ctDesignIcons.SettingsCog, { width: 24, height: 24 }),
538
+ redirectionLink: '/account/settings',
539
+ },
540
+ {
541
+ text: 'Privacy Rights',
542
+ icon: jsxRuntime.jsx(ctDesignIcons.PrivacyRights, {}),
543
+ redirectionLink: 'accounts/personal-data-dashboard',
544
+ },
545
+ ];
727
546
  var SIGN_OUT_TEXT = 'Logout';
728
547
  var MY_ACCOUNT_TEXT = 'My Account';
729
548
  var LOGGEDIN_USER_TEXT = 'You are logged in with';
@@ -732,816 +551,326 @@ var ACCOUNT_OPTIONS_CONTAINER_ID = 'account-options';
732
551
  var ACCOUNT_OPTIONS_CONTAINER_WIDTH = 328;
733
552
 
734
553
  var LoyaltyChip = function (_a) {
735
- var icon = _a.icon,
736
- borderGradient = _a.borderGradient,
737
- backgroundGradient = _a.backgroundGradient,
738
- handleChipClick = _a.handleChipClick,
739
- chevronFillColor = _a.chevronFillColor;
740
- var _b = useHeaderContext(),
741
- loyaltyType = _b.loyaltyType,
742
- isUserLoggedIn = _b.isUserLoggedIn,
743
- ravenPushCallback = _b.ravenPushCallback,
744
- ravenPageName = _b.ravenPageName,
745
- _c = _b.ravenPayload,
746
- ravenPayload = _c === void 0 ? {} : _c,
747
- ravenEventName = _b.ravenEventName;
748
- var _d = react.useState(false),
749
- isHovered = _d[0],
750
- setIsHovered = _d[1];
751
- var handleClick = react.useCallback(function () {
752
- var _a;
753
- if (handleChipClick) {
754
- handleChipClick();
755
- } else {
756
- var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
757
- var defaultPayload = {
758
- action_name: "loyalty_account_click",
759
- action_type: 'click',
760
- u_utm_source: utmSource,
761
- loyaltyType: ravenLoyaltyTypes(loyaltyType)
762
- };
763
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
764
- window.location.href = '/all-offers/loyalty-october';
765
- }
766
- }, [handleChipClick, loyaltyType, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
767
- return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
768
- display: 'flex',
769
- position: 'relative',
770
- alignItems: 'center',
771
- justifyContent: 'center',
772
- borderRadius: '8px',
773
- cursor: 'pointer',
774
- paddingLeft: '8px',
775
- paddingRight: isHovered ? '4px' : '8px',
776
- css: {
777
- overflow: 'hidden',
778
- height: 32,
779
- paddingLeft: 8,
780
- transition: 'padding-right 0.2s ease-in-out'
781
- },
782
- onMouseEnter: function () {
783
- return setIsHovered(true);
784
- },
785
- onMouseLeave: function () {
786
- return setIsHovered(false);
787
- },
788
- onClick: handleClick
789
- }, {
790
- children: [jsxRuntime.jsx(ctDesignContainer.Container, {
791
- css: {
792
- content: '""',
793
- position: 'absolute',
794
- inset: 0,
795
- borderRadius: 'inherit',
796
- background: backgroundGradient,
797
- zIndex: -2
798
- }
799
- }), jsxRuntime.jsx(ctDesignContainer.Container, {
800
- css: {
801
- content: '""',
802
- position: 'absolute',
803
- inset: 0,
804
- borderRadius: 'inherit',
805
- padding: '1px',
806
- background: borderGradient,
807
- WebkitMask: 'linear-gradient(white, white) content-box, linear-gradient(white, white)',
808
- WebkitMaskComposite: 'destination-out',
809
- maskComposite: 'exclude',
810
- zIndex: -1
811
- }
812
- }), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
813
- display: 'flex',
814
- alignItems: 'center',
815
- position: 'relative'
816
- }, {
817
- children: icon
818
- })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
819
- display: 'flex',
820
- alignItems: 'center',
821
- css: {
822
- overflow: 'hidden',
823
- maxWidth: isHovered ? 16 : 0,
824
- transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
825
- opacity: isHovered ? 0.5 : 0
826
- }
827
- }, {
828
- children: jsxRuntime.jsx(ctDesignIcons.HeaderChevronRight, {
829
- color: chevronFillColor
830
- })
831
- }))]
832
- }));
554
+ var icon = _a.icon, borderGradient = _a.borderGradient, backgroundGradient = _a.backgroundGradient, handleChipClick = _a.handleChipClick, chevronFillColor = _a.chevronFillColor;
555
+ var _b = useHeaderContext(), loyaltyType = _b.loyaltyType, isUserLoggedIn = _b.isUserLoggedIn, ravenPushCallback = _b.ravenPushCallback, ravenPageName = _b.ravenPageName, _c = _b.ravenPayload, ravenPayload = _c === void 0 ? {} : _c, ravenEventName = _b.ravenEventName;
556
+ var _d = react.useState(false), isHovered = _d[0], setIsHovered = _d[1];
557
+ var handleClick = react.useCallback(function () {
558
+ var _a;
559
+ if (handleChipClick) {
560
+ handleChipClick();
561
+ }
562
+ else {
563
+ var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
564
+ var defaultPayload = {
565
+ action_name: "loyalty_account_click",
566
+ action_type: 'click',
567
+ u_utm_source: utmSource,
568
+ loyaltyType: ravenLoyaltyTypes(loyaltyType),
569
+ };
570
+ ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
571
+ window.location.href = '/all-offers/loyalty-october';
572
+ }
573
+ }, [handleChipClick, loyaltyType, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
574
+ return (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', position: 'relative', alignItems: 'center', justifyContent: 'center', borderRadius: '8px', cursor: 'pointer', paddingLeft: '8px', paddingRight: isHovered ? '4px' : '8px', css: {
575
+ overflow: 'hidden',
576
+ height: 32,
577
+ paddingLeft: 8,
578
+ transition: 'padding-right 0.2s ease-in-out',
579
+ }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onClick: handleClick }, { children: [jsxRuntime.jsx(ctDesignContainer.Container, { css: {
580
+ content: '""',
581
+ position: 'absolute',
582
+ inset: 0,
583
+ borderRadius: 'inherit',
584
+ background: backgroundGradient,
585
+ zIndex: -2,
586
+ } }), jsxRuntime.jsx(ctDesignContainer.Container, { css: {
587
+ content: '""',
588
+ position: 'absolute',
589
+ inset: 0,
590
+ borderRadius: 'inherit',
591
+ padding: '1px',
592
+ background: borderGradient,
593
+ WebkitMask: 'linear-gradient(white, white) content-box, linear-gradient(white, white)',
594
+ WebkitMaskComposite: 'destination-out',
595
+ maskComposite: 'exclude',
596
+ zIndex: -1,
597
+ } }), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ display: 'flex', alignItems: 'center', position: 'relative' }, { children: icon })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ display: 'flex', alignItems: 'center', css: {
598
+ overflow: 'hidden',
599
+ maxWidth: isHovered ? 16 : 0,
600
+ transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
601
+ opacity: isHovered ? 0.5 : 0,
602
+ } }, { children: jsxRuntime.jsx(ctDesignIcons.HeaderChevronRight, { color: chevronFillColor }) }))] })));
833
603
  };
834
604
 
835
605
  exports.LOBS_VALUES = void 0;
836
606
  (function (LOBS_VALUES) {
837
- LOBS_VALUES["FLIGHTS"] = "Flights";
838
- LOBS_VALUES["HOTELS"] = "Hotels";
839
- LOBS_VALUES["BUSES"] = "Buses";
840
- LOBS_VALUES["TRAINS"] = "Trains";
841
- LOBS_VALUES["PACKAGES"] = "Packages";
607
+ LOBS_VALUES["FLIGHTS"] = "Flights";
608
+ LOBS_VALUES["HOTELS"] = "Hotels";
609
+ LOBS_VALUES["BUSES"] = "Buses";
610
+ LOBS_VALUES["TRAINS"] = "Trains";
611
+ LOBS_VALUES["PACKAGES"] = "Packages";
842
612
  })(exports.LOBS_VALUES || (exports.LOBS_VALUES = {}));
843
613
 
844
614
  exports.LoyaltyType = void 0;
845
615
  (function (LoyaltyType) {
846
- LoyaltyType["FkVip"] = "FkVip";
847
- LoyaltyType["FkPremium"] = "FkPremium";
848
- LoyaltyType["InsiderIcon"] = "InsiderIcon";
849
- LoyaltyType["InsiderElite"] = "InsiderElite";
850
- LoyaltyType["CtLoyalty"] = "CtLoyalty";
616
+ LoyaltyType["FkVip"] = "FkVip";
617
+ LoyaltyType["FkPremium"] = "FkPremium";
618
+ LoyaltyType["InsiderIcon"] = "InsiderIcon";
619
+ LoyaltyType["InsiderElite"] = "InsiderElite";
620
+ LoyaltyType["CtLoyalty"] = "CtLoyalty";
851
621
  })(exports.LoyaltyType || (exports.LoyaltyType = {}));
852
622
 
853
623
  var _a;
854
- var LOYALTY_DATA = (_a = {}, _a[exports.LoyaltyType.FkVip] = {
855
- icon: jsxRuntime.jsx(ctDesignIcons.FkBlackIcon, {}),
856
- borderGradient: 'linear-gradient(217.07deg, #0B182A 19.65%, #434E57 54.8%, #595952 89.95%)',
857
- backgroundGradient: 'linear-gradient(217.07deg, #0B182A 19.65%, #434E57 54.8%, #595952 89.95%)',
858
- chevronFillColor: '#FFF'
859
- }, _a[exports.LoyaltyType.FkPremium] = {
860
- icon: jsxRuntime.jsx(ctDesignIcons.FkGold, {}),
861
- borderGradient: 'linear-gradient(230.68deg, rgba(243, 179, 39, 0) 10.1%, #F3B327 45.74%)',
862
- backgroundGradient: '#191717',
863
- chevronFillColor: '#FFF'
864
- }, _a[exports.LoyaltyType.InsiderIcon] = {
865
- icon: jsxRuntime.jsx(ctDesignIcons.InsiderIcon, {}),
866
- borderGradient: 'linear-gradient(230.68deg, rgba(208, 175, 101, 0) 10.1%, #D0AF65 45.74%)',
867
- backgroundGradient: 'linear-gradient(111deg, #2E3042 0%, #1A1C23 100%)',
868
- chevronFillColor: '#FFF'
869
- }, _a[exports.LoyaltyType.InsiderElite] = {
870
- icon: jsxRuntime.jsx(ctDesignIcons.InsiderElite, {}),
871
- borderGradient: 'linear-gradient(230.68deg, rgba(208, 175, 101, 0) 10.1%, #D0AF65 45.74%)',
872
- backgroundGradient: 'linear-gradient(111deg, #2E3042 0%, #1A1C23 100%)',
873
- chevronFillColor: '#FFF'
874
- }, _a[exports.LoyaltyType.CtLoyalty] = {
875
- icon: jsxRuntime.jsx(ctDesignIcons.CtLoyalty, {}),
876
- borderGradient: 'linear-gradient(230.68deg, rgba(243, 179, 39, 0) 10.1%, #F3B327 45.74%)',
877
- backgroundGradient: 'linear-gradient(110.82deg, #FFF9EC 0%, #FEE3A8 100%)',
878
- chevronFillColor: '#1A1A1A'
879
- }, _a);
880
-
881
- var ExpandableItem = function (_a) {
882
- var icon = _a.icon,
883
- handleChipClick = _a.handleChipClick,
884
- value = _a.value,
885
- type = _a.type;
886
- var _b = useHeaderContext(),
887
- loyaltyType = _b.loyaltyType,
888
- isUserLoggedIn = _b.isUserLoggedIn,
889
- ravenPushCallback = _b.ravenPushCallback,
890
- ravenPageName = _b.ravenPageName,
891
- ravenEventName = _b.ravenEventName,
892
- _c = _b.ravenPayload,
893
- ravenPayload = _c === void 0 ? {} : _c;
894
- var _d = react.useState(false),
895
- isHovered = _d[0],
896
- setIsHovered = _d[1];
897
- var handleDefaultClick = react.useCallback(function () {
898
- var _a;
899
- if (handleChipClick) {
900
- handleChipClick();
901
- } else {
902
- var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
903
- var defaultPayload = {
904
- action_name: "".concat(type, "_account_click"),
905
- action_type: 'click',
906
- u_utm_source: utmSource,
907
- loyaltyType: ravenLoyaltyTypes(loyaltyType)
908
- };
909
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
910
- var redirectUrls = {
911
- supercoin: '/all-offers/supercoins/',
912
- wallet: '/accounts/wallet'
913
- };
914
- if (redirectUrls[type]) {
915
- window.location.href = redirectUrls[type];
916
- }
917
- }
918
- }, [handleChipClick, type, loyaltyType, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
919
- return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
920
- display: 'flex',
921
- alignItems: 'center',
922
- justifyContent: 'center',
923
- borderRadius: '8px',
924
- cursor: 'pointer',
925
- css: {
926
- height: 32,
927
- paddingLeft: 8,
928
- paddingRight: isHovered ? 4 : 8,
929
- transition: 'padding-right 0.2s ease-in-out',
930
- background: isHovered ? '#ffd7ca' : '#ffe6df'
624
+ var LOYALTY_DATA = (_a = {},
625
+ _a[exports.LoyaltyType.FkVip] = {
626
+ icon: jsxRuntime.jsx(ctDesignIcons.FkBlackIcon, {}),
627
+ borderGradient: 'linear-gradient(217.07deg, #0B182A 19.65%, #434E57 54.8%, #595952 89.95%)',
628
+ backgroundGradient: 'linear-gradient(217.07deg, #0B182A 19.65%, #434E57 54.8%, #595952 89.95%)',
629
+ chevronFillColor: '#FFF',
630
+ },
631
+ _a[exports.LoyaltyType.FkPremium] = {
632
+ icon: jsxRuntime.jsx(ctDesignIcons.FkGold, {}),
633
+ borderGradient: 'linear-gradient(230.68deg, rgba(243, 179, 39, 0) 10.1%, #F3B327 45.74%)',
634
+ backgroundGradient: '#191717',
635
+ chevronFillColor: '#FFF',
636
+ },
637
+ _a[exports.LoyaltyType.InsiderIcon] = {
638
+ icon: jsxRuntime.jsx(ctDesignIcons.InsiderIcon, {}),
639
+ borderGradient: 'linear-gradient(230.68deg, rgba(208, 175, 101, 0) 10.1%, #D0AF65 45.74%)',
640
+ backgroundGradient: 'linear-gradient(111deg, #2E3042 0%, #1A1C23 100%)',
641
+ chevronFillColor: '#FFF',
931
642
  },
932
- onMouseEnter: function () {
933
- return setIsHovered(true);
643
+ _a[exports.LoyaltyType.InsiderElite] = {
644
+ icon: jsxRuntime.jsx(ctDesignIcons.InsiderElite, {}),
645
+ borderGradient: 'linear-gradient(230.68deg, rgba(208, 175, 101, 0) 10.1%, #D0AF65 45.74%)',
646
+ backgroundGradient: 'linear-gradient(111deg, #2E3042 0%, #1A1C23 100%)',
647
+ chevronFillColor: '#FFF',
934
648
  },
935
- onMouseLeave: function () {
936
- return setIsHovered(false);
649
+ _a[exports.LoyaltyType.CtLoyalty] = {
650
+ icon: jsxRuntime.jsx(ctDesignIcons.CtLoyalty, {}),
651
+ borderGradient: 'linear-gradient(230.68deg, rgba(243, 179, 39, 0) 10.1%, #F3B327 45.74%)',
652
+ backgroundGradient: 'linear-gradient(110.82deg, #FFF9EC 0%, #FEE3A8 100%)',
653
+ chevronFillColor: '#1A1A1A',
937
654
  },
938
- onClick: handleDefaultClick
939
- }, {
940
- children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
941
- display: 'flex',
942
- alignItems: 'center',
943
- css: {
944
- gap: '4px'
945
- }
946
- }, {
947
- children: [icon, jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
948
- variant: 'B3',
949
- isClickable: true
950
- }, {
951
- children: value
952
- }))]
953
- })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
954
- display: 'flex',
955
- alignItems: 'center',
956
- css: {
957
- overflow: 'hidden',
958
- maxWidth: isHovered ? 16 : 0,
959
- transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
960
- opacity: isHovered ? 1 : 0
961
- }
962
- }, {
963
- children: jsxRuntime.jsx(ctDesignIcons.HeaderChevronRight, {})
964
- }))]
965
- }));
655
+ _a);
656
+
657
+ var ExpandableItem = function (_a) {
658
+ var icon = _a.icon, handleChipClick = _a.handleChipClick, value = _a.value, type = _a.type;
659
+ var _b = useHeaderContext(), loyaltyType = _b.loyaltyType, isUserLoggedIn = _b.isUserLoggedIn, ravenPushCallback = _b.ravenPushCallback, ravenPageName = _b.ravenPageName, ravenEventName = _b.ravenEventName, _c = _b.ravenPayload, ravenPayload = _c === void 0 ? {} : _c;
660
+ var _d = react.useState(false), isHovered = _d[0], setIsHovered = _d[1];
661
+ var handleDefaultClick = react.useCallback(function () {
662
+ var _a;
663
+ if (handleChipClick) {
664
+ handleChipClick();
665
+ }
666
+ else {
667
+ var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
668
+ var defaultPayload = {
669
+ action_name: "".concat(type, "_account_click"),
670
+ action_type: 'click',
671
+ u_utm_source: utmSource,
672
+ loyaltyType: ravenLoyaltyTypes(loyaltyType),
673
+ };
674
+ ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
675
+ var redirectUrls = {
676
+ supercoin: '/all-offers/supercoins/',
677
+ wallet: '/accounts/wallet',
678
+ };
679
+ if (redirectUrls[type]) {
680
+ window.location.href = redirectUrls[type];
681
+ }
682
+ }
683
+ }, [
684
+ handleChipClick,
685
+ type,
686
+ loyaltyType,
687
+ isUserLoggedIn,
688
+ ravenEventName,
689
+ ravenPayload,
690
+ ravenPushCallback,
691
+ ravenPageName,
692
+ ]);
693
+ return (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '8px', cursor: 'pointer', css: {
694
+ height: 32,
695
+ paddingLeft: 8,
696
+ paddingRight: isHovered ? 4 : 8,
697
+ transition: 'padding-right 0.2s ease-in-out',
698
+ background: isHovered ? '#ffd7ca' : '#ffe6df',
699
+ }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onClick: handleDefaultClick }, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', alignItems: 'center', css: { gap: '4px' } }, { children: [icon, jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'B3', isClickable: true }, { children: value }))] })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ display: 'flex', alignItems: 'center', css: {
700
+ overflow: 'hidden',
701
+ maxWidth: isHovered ? 16 : 0,
702
+ transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
703
+ opacity: isHovered ? 1 : 0,
704
+ } }, { children: jsxRuntime.jsx(ctDesignIcons.HeaderChevronRight, {}) }))] })));
966
705
  };
967
706
  var RewardsSection = function () {
968
- var _a;
969
- var _b = useHeaderContext(),
970
- selectedLoyaltyType = _b.loyaltyType,
971
- _c = _b.fkSupercoinBurnBalance,
972
- superCoinBalance = _c === void 0 ? 0 : _c,
973
- _d = _b.walletBalance,
974
- walletBalance = _d === void 0 ? 0 : _d,
975
- loyaltyLoading = _b.loyaltyLoading,
976
- superCoinsLoading = _b.superCoinsLoading,
977
- walletLoading = _b.walletLoading,
978
- walletChipClick = _b.walletChipClick,
979
- supercoinsChipClick = _b.supercoinsChipClick,
980
- loyaltyChipClick = _b.loyaltyChipClick,
981
- hideWalletChip = _b.hideWalletChip,
982
- hideSupercoinsChip = _b.hideSupercoinsChip,
983
- hideLoyaltyChip = _b.hideLoyaltyChip;
984
- var shouldShowLoyalty = loyaltyLoading || selectedLoyaltyType && LOYALTY_DATA[selectedLoyaltyType] && !hideLoyaltyChip;
985
- var shouldShowSupercoin = superCoinsLoading || !hideSupercoinsChip;
986
- var shouldShowWallet = walletLoading || !hideWalletChip;
987
- if (!shouldShowLoyalty && !shouldShowSupercoin && !shouldShowWallet) {
988
- return null;
989
- }
990
- return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
991
- display: 'flex',
992
- padding: '0 16px 16px 16px',
993
- justifyContent: 'flex-start',
994
- css: {
995
- alignSelf: 'stretch',
996
- gap: '4px'
707
+ var _a;
708
+ var _b = useHeaderContext(), selectedLoyaltyType = _b.loyaltyType, _c = _b.fkSupercoinBurnBalance, superCoinBalance = _c === void 0 ? 0 : _c, _d = _b.walletBalance, walletBalance = _d === void 0 ? 0 : _d, loyaltyLoading = _b.loyaltyLoading, superCoinsLoading = _b.superCoinsLoading, walletLoading = _b.walletLoading, walletChipClick = _b.walletChipClick, supercoinsChipClick = _b.supercoinsChipClick, loyaltyChipClick = _b.loyaltyChipClick, hideWalletChip = _b.hideWalletChip, hideSupercoinsChip = _b.hideSupercoinsChip, hideLoyaltyChip = _b.hideLoyaltyChip;
709
+ var shouldShowLoyalty = loyaltyLoading || (selectedLoyaltyType && LOYALTY_DATA[selectedLoyaltyType] && !hideLoyaltyChip);
710
+ var shouldShowSupercoin = superCoinsLoading || !hideSupercoinsChip;
711
+ var shouldShowWallet = walletLoading || !hideWalletChip;
712
+ if (!shouldShowLoyalty && !shouldShowSupercoin && !shouldShowWallet) {
713
+ return null;
997
714
  }
998
- }, {
999
- children: [loyaltyLoading ? jsxRuntime.jsx(ctDesignContainer.Container, {
1000
- width: '50px',
1001
- height: '32px',
1002
- borderRadius: '8px',
1003
- backgroundColor: '#efefef'
1004
- }) : selectedLoyaltyType && LOYALTY_DATA[selectedLoyaltyType] && !hideLoyaltyChip && jsxRuntime.jsx(LoyaltyChip, {
1005
- icon: LOYALTY_DATA[selectedLoyaltyType].icon,
1006
- borderGradient: LOYALTY_DATA[selectedLoyaltyType].borderGradient,
1007
- backgroundGradient: LOYALTY_DATA[selectedLoyaltyType].backgroundGradient,
1008
- chevronFillColor: ((_a = LOYALTY_DATA[selectedLoyaltyType]) === null || _a === void 0 ? void 0 : _a.chevronFillColor) || '#FFF',
1009
- handleChipClick: loyaltyChipClick
1010
- }), superCoinsLoading ? jsxRuntime.jsx(ctDesignContainer.Container, {
1011
- width: '50px',
1012
- height: '32px',
1013
- borderRadius: '8px',
1014
- backgroundColor: '#efefef'
1015
- }) : !hideSupercoinsChip && jsxRuntime.jsx(ExpandableItem, {
1016
- icon: jsxRuntime.jsx(ctDesignIcons.Supercoin, {
1017
- width: 20,
1018
- height: 20
1019
- }),
1020
- value: superCoinBalance,
1021
- handleChipClick: supercoinsChipClick,
1022
- type: 'supercoin'
1023
- }), walletLoading ? jsxRuntime.jsx(ctDesignContainer.Container, {
1024
- width: '50px',
1025
- height: '32px',
1026
- borderRadius: '8px',
1027
- backgroundColor: '#efefef'
1028
- }) : !hideWalletChip && jsxRuntime.jsx(ExpandableItem, {
1029
- icon: jsxRuntime.jsx(ctDesignIcons.Wallet, {
1030
- width: 20,
1031
- height: 20
1032
- }),
1033
- value: walletBalance,
1034
- handleChipClick: walletChipClick,
1035
- type: 'wallet'
1036
- })]
1037
- }));
715
+ return (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', padding: '0 16px 16px 16px', justifyContent: 'flex-start', css: { alignSelf: 'stretch', gap: '4px' } }, { children: [loyaltyLoading ? (jsxRuntime.jsx(ctDesignContainer.Container, { width: '50px', height: '32px', borderRadius: '8px', backgroundColor: '#efefef' })) : (selectedLoyaltyType &&
716
+ LOYALTY_DATA[selectedLoyaltyType] &&
717
+ !hideLoyaltyChip && (jsxRuntime.jsx(LoyaltyChip, { icon: LOYALTY_DATA[selectedLoyaltyType].icon, borderGradient: LOYALTY_DATA[selectedLoyaltyType].borderGradient, backgroundGradient: LOYALTY_DATA[selectedLoyaltyType].backgroundGradient, chevronFillColor: ((_a = LOYALTY_DATA[selectedLoyaltyType]) === null || _a === void 0 ? void 0 : _a.chevronFillColor) || '#FFF', handleChipClick: loyaltyChipClick }))), superCoinsLoading ? (jsxRuntime.jsx(ctDesignContainer.Container, { width: '50px', height: '32px', borderRadius: '8px', backgroundColor: '#efefef' })) : (!hideSupercoinsChip && (jsxRuntime.jsx(ExpandableItem, { icon: jsxRuntime.jsx(ctDesignIcons.Supercoin, { width: 20, height: 20 }), value: superCoinBalance, handleChipClick: supercoinsChipClick, type: 'supercoin' }))), walletLoading ? (jsxRuntime.jsx(ctDesignContainer.Container, { width: '50px', height: '32px', borderRadius: '8px', backgroundColor: '#efefef' })) : (!hideWalletChip && (jsxRuntime.jsx(ExpandableItem, { icon: jsxRuntime.jsx(ctDesignIcons.Wallet, { width: 20, height: 20 }), value: walletBalance, handleChipClick: walletChipClick, type: 'wallet' })))] })));
1038
718
  };
1039
719
 
1040
720
  var AccountDropdownContent = function (_a) {
1041
- var isOpen = _a.isOpen;
1042
- var _b = useHeaderContext(),
1043
- handleLogoutClick = _b.handleLogoutClick,
1044
- userName = _b.userName,
1045
- userMobileNumber = _b.userMobileNumber,
1046
- countryCode = _b.countryCode,
1047
- userDetailsLoading = _b.userDetailsLoading,
1048
- loyaltyType = _b.loyaltyType,
1049
- isUserLoggedIn = _b.isUserLoggedIn,
1050
- ravenEventName = _b.ravenEventName,
1051
- ravenPageName = _b.ravenPageName,
1052
- _c = _b.ravenPayload,
1053
- ravenPayload = _c === void 0 ? {} : _c,
1054
- ravenPushCallback = _b.ravenPushCallback;
1055
- var containerRef = useDropdownAnimation(isOpen).containerRef;
1056
- var _d = react.useMemo(function () {
1057
- return {
721
+ var isOpen = _a.isOpen;
722
+ var _b = useHeaderContext(), handleLogoutClick = _b.handleLogoutClick, userName = _b.userName, userMobileNumber = _b.userMobileNumber, countryCode = _b.countryCode, userDetailsLoading = _b.userDetailsLoading, loyaltyType = _b.loyaltyType, isUserLoggedIn = _b.isUserLoggedIn, ravenEventName = _b.ravenEventName, ravenPageName = _b.ravenPageName, _c = _b.ravenPayload, ravenPayload = _c === void 0 ? {} : _c, ravenPushCallback = _b.ravenPushCallback;
723
+ var containerRef = useDropdownAnimation(isOpen).containerRef;
724
+ var _d = react.useMemo(function () { return ({
1058
725
  userGreeting: userName ? "Hello ".concat(userName, "!") : '',
1059
- phoneNumber: countryCode && userMobileNumber ? "".concat(countryCode, " ").concat(userMobileNumber) : ''
1060
- };
1061
- }, [userName, userMobileNumber, countryCode]),
1062
- userGreeting = _d.userGreeting,
1063
- phoneNumber = _d.phoneNumber;
1064
- var generateRavenPayload = function (actionName) {
1065
- var _a;
1066
- return {
1067
- action_name: actionName.toLowerCase().replace(/[\s-]/g, '') + '_account_click',
1068
- action_type: 'click',
1069
- u_utm_source: (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic',
1070
- loyalty_type: ravenLoyaltyTypes(loyaltyType)
1071
- };
1072
- };
1073
- var handleAccountOptionsClick = react.useCallback(function (text, redirectLink) {
1074
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, generateRavenPayload(text), ravenPayload, ravenPushCallback, ravenPageName);
1075
- window.location.href = redirectLink;
1076
- }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
1077
- react.useCallback(function () {
1078
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, generateRavenPayload(SIGN_OUT_TEXT), ravenPayload, ravenPushCallback, ravenPageName);
1079
- handleLogoutClick();
1080
- }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, handleLogoutClick]);
1081
- var positionAccountOptionsDiv = react.useCallback(function () {
1082
- var headerAccBtn = document.getElementById(HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID);
1083
- var accountOptionsElem = document.getElementById(ACCOUNT_OPTIONS_CONTAINER_ID);
1084
- if (headerAccBtn && accountOptionsElem) {
1085
- var headerBtnRight = headerAccBtn.getBoundingClientRect().right;
1086
- accountOptionsElem.style.left = "".concat(headerBtnRight - ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px");
1087
- }
1088
- }, []);
1089
- react.useEffect(function () {
1090
- positionAccountOptionsDiv();
1091
- }, [positionAccountOptionsDiv]);
1092
- var renderUserData = function () {
1093
- var renderContent = function (loading, content, variant, color) {
1094
- return jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
1095
- variant: variant,
1096
- color: color
1097
- }, {
1098
- children: loading ? jsxRuntime.jsx(ctDesignContainer.Container, {
1099
- height: variant === 'HM3' ? '18px' : '12px',
1100
- width: variant === 'HM3' ? '140px' : '200px',
1101
- backgroundColor: '#efefef',
1102
- borderRadius: '8px'
1103
- }) : content
1104
- }));
726
+ phoneNumber: countryCode && userMobileNumber ? "".concat(countryCode, " ").concat(userMobileNumber) : '',
727
+ }); }, [userName, userMobileNumber, countryCode]), userGreeting = _d.userGreeting, phoneNumber = _d.phoneNumber;
728
+ var generateRavenPayload = function (actionName) {
729
+ var _a;
730
+ return ({
731
+ action_name: actionName.toLowerCase().replace(/[\s-]/g, '') + '_account_click',
732
+ action_type: 'click',
733
+ u_utm_source: (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic',
734
+ loyalty_type: ravenLoyaltyTypes(loyaltyType),
735
+ });
1105
736
  };
1106
- return jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
1107
- display: 'flex',
1108
- flexDirection: 'column',
1109
- css: {
1110
- gap: '4px'
1111
- }
1112
- }, {
1113
- children: userGreeting ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
1114
- children: [renderContent(userDetailsLoading, userGreeting, 'HM3', 'primary'), renderContent(userDetailsLoading, "".concat(LOGGEDIN_USER_TEXT, " ").concat(phoneNumber), 'P3', 'subheading')]
1115
- }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
1116
- children: [renderContent(userDetailsLoading, LOGGEDIN_USER_TEXT, 'P3', 'subheading'), renderContent(userDetailsLoading, phoneNumber, 'HM3', 'primary')]
1117
- })
1118
- }));
1119
- };
1120
- return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
1121
- id: ACCOUNT_OPTIONS_CONTAINER_ID,
1122
- ref: containerRef,
1123
- display: 'flex',
1124
- flexDirection: 'column',
1125
- borderRadius: '16px',
1126
- zIndex: 1002,
1127
- top: '76px',
1128
- position: 'fixed',
1129
- css: {
1130
- opacity: 0,
1131
- overflow: 'hidden'
1132
- },
1133
- width: "".concat(ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px"),
1134
- background: '#FFF1EC'
1135
- }, {
1136
- children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
1137
- padding: '16px',
1138
- height: '76px'
1139
- }, {
1140
- children: renderUserData()
1141
- })), jsxRuntime.jsx(RewardsSection, {}), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
1142
- display: 'flex',
1143
- flexDirection: 'column',
1144
- padding: '8px',
1145
- backgroundColor: 'white',
1146
- rowGap: '8px',
1147
- css: {
1148
- borderBottomLeftRadius: 12,
1149
- borderBottomRightRadius: 12
1150
- }
1151
- }, {
1152
- children: [ACCOUNT_OPTIONS_POPUP_CONFIG.map(function (_a) {
1153
- var text = _a.text,
1154
- icon = _a.icon,
1155
- redirectionLink = _a.redirectionLink;
1156
- return jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
1157
- padding: '8px',
1158
- borderRadius: '8px',
1159
- cursor: 'pointer',
1160
- onClick: function () {
1161
- return handleAccountOptionsClick(text, redirectionLink);
1162
- },
1163
- css: accountOptionHoverStyles
1164
- }, {
1165
- children: jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
1166
- display: 'flex',
1167
- cursor: 'pointer',
1168
- css: {
1169
- columnGap: '8px'
1170
- }
1171
- }, {
1172
- children: [icon, jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
1173
- variant: 'P1',
1174
- css: {
1175
- display: 'flex',
1176
- alignItems: 'center',
1177
- cursor: 'pointer'
1178
- }
1179
- }, {
1180
- children: text
1181
- }))]
1182
- }))
1183
- }), "account-option-".concat(text));
1184
- }), jsxRuntime.jsx(ctDesignDivider.Divider, {
1185
- css: {
1186
- borderBottom: '1px dashed #E6E6E6'
737
+ var handleAccountOptionsClick = react.useCallback(function (text, redirectLink) {
738
+ ravenSDKTrigger(isUserLoggedIn, ravenEventName, generateRavenPayload(text), ravenPayload, ravenPushCallback, ravenPageName);
739
+ window.location.href = redirectLink;
740
+ }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
741
+ react.useCallback(function () {
742
+ ravenSDKTrigger(isUserLoggedIn, ravenEventName, generateRavenPayload(SIGN_OUT_TEXT), ravenPayload, ravenPushCallback, ravenPageName);
743
+ handleLogoutClick();
744
+ }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, handleLogoutClick]);
745
+ var positionAccountOptionsDiv = react.useCallback(function () {
746
+ var headerAccBtn = document.getElementById(HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID);
747
+ var accountOptionsElem = document.getElementById(ACCOUNT_OPTIONS_CONTAINER_ID);
748
+ if (headerAccBtn && accountOptionsElem) {
749
+ var headerBtnRight = headerAccBtn.getBoundingClientRect().right;
750
+ accountOptionsElem.style.left = "".concat(headerBtnRight - ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px");
1187
751
  }
1188
- }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
1189
- display: 'flex',
1190
- padding: '8px',
1191
- borderRadius: '8px',
1192
- cursor: 'pointer',
1193
- columnGap: '8px',
1194
- onClick: handleLogoutClick,
1195
- css: logoutButtonHoverStyles
1196
- }, {
1197
- children: [jsxRuntime.jsx(ctDesignIcons.Signout, {
1198
- height: 24,
1199
- width: 24
1200
- }), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
1201
- variant: 'P1',
1202
- css: {
1203
- display: 'flex',
1204
- alignItems: 'center',
1205
- cursor: 'pointer'
1206
- },
1207
- color: 'warning'
1208
- }, {
1209
- children: SIGN_OUT_TEXT
1210
- }))]
1211
- }))]
1212
- }))]
1213
- }));
752
+ }, []);
753
+ react.useEffect(function () {
754
+ positionAccountOptionsDiv();
755
+ }, [positionAccountOptionsDiv]);
756
+ var renderUserData = function () {
757
+ var renderContent = function (loading, content, variant, color) { return (jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: variant, color: color }, { children: loading ? (jsxRuntime.jsx(ctDesignContainer.Container, { height: variant === 'HM3' ? '18px' : '12px', width: variant === 'HM3' ? '140px' : '200px', backgroundColor: '#efefef', borderRadius: '8px' })) : (content) }))); };
758
+ return (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ display: 'flex', flexDirection: 'column', css: { gap: '4px' } }, { children: userGreeting ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderContent(userDetailsLoading, userGreeting, 'HM3', 'primary'), renderContent(userDetailsLoading, "".concat(LOGGEDIN_USER_TEXT, " ").concat(phoneNumber), 'P3', 'subheading')] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderContent(userDetailsLoading, LOGGEDIN_USER_TEXT, 'P3', 'subheading'), renderContent(userDetailsLoading, phoneNumber, 'HM3', 'primary')] })) })));
759
+ };
760
+ return (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ id: ACCOUNT_OPTIONS_CONTAINER_ID, ref: containerRef, display: 'flex', flexDirection: 'column', borderRadius: '16px', zIndex: 1002, top: '76px', position: 'fixed', css: { opacity: 0, overflow: 'hidden' }, width: "".concat(ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px"), background: '#FFF1EC' }, { children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ padding: '16px', height: '76px' }, { children: renderUserData() })), jsxRuntime.jsx(RewardsSection, {}), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', flexDirection: 'column', padding: '8px', backgroundColor: 'white', rowGap: '8px', css: {
761
+ borderBottomLeftRadius: 12,
762
+ borderBottomRightRadius: 12,
763
+ } }, { children: [ACCOUNT_OPTIONS_POPUP_CONFIG.map(function (_a) {
764
+ var text = _a.text, icon = _a.icon, redirectionLink = _a.redirectionLink;
765
+ return (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ padding: '8px', borderRadius: '8px', cursor: 'pointer', onClick: function () { return handleAccountOptionsClick(text, redirectionLink); }, css: accountOptionHoverStyles }, { children: jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', cursor: 'pointer', css: { columnGap: '8px' } }, { children: [icon, jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'P1', css: { display: 'flex', alignItems: 'center', cursor: 'pointer' } }, { children: text }))] })) }), "account-option-".concat(text)));
766
+ }), jsxRuntime.jsx(ctDesignDivider.Divider, { css: {
767
+ borderBottom: '1px dashed #E6E6E6',
768
+ } }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', padding: '8px', borderRadius: '8px', cursor: 'pointer', columnGap: '8px', onClick: handleLogoutClick, css: logoutButtonHoverStyles }, { children: [jsxRuntime.jsx(ctDesignIcons.Signout, { height: 24, width: 24 }), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'P1', css: { display: 'flex', alignItems: 'center', cursor: 'pointer' }, color: 'warning' }, { children: SIGN_OUT_TEXT }))] }))] }))] })));
1214
769
  };
1215
770
 
1216
771
  var UserAccount = function () {
1217
- var _a = useHeaderContext(),
1218
- isNovacThemeEnabled = _a.isNovacThemeEnabled,
1219
- ravenEventName = _a.ravenEventName,
1220
- _b = _a.ravenPayload,
1221
- ravenPayload = _b === void 0 ? {} : _b,
1222
- ravenPushCallback = _a.ravenPushCallback,
1223
- isUserLoggedIn = _a.isUserLoggedIn,
1224
- loyaltyType = _a.loyaltyType,
1225
- ravenPageName = _a.ravenPageName;
1226
- var _c = useHoverDropdown({
1227
- openDelay: 0
1228
- }),
1229
- isDropdownVisible = _c.isDropdownVisible,
1230
- handleOnMouseEnter = _c.handleOnMouseEnter,
1231
- handleOnMouseLeave = _c.handleOnMouseLeave,
1232
- handleDropdownMouseEnter = _c.handleDropdownMouseEnter,
1233
- handleDropdownMouseLeave = _c.handleDropdownMouseLeave;
1234
- var _d = react.useState(false),
1235
- scrolled = _d[0],
1236
- setScrolled = _d[1];
1237
- react.useEffect(function () {
1238
- var handleScroll = function () {
1239
- setScrolled(window.scrollY >= 50);
1240
- };
1241
- window.addEventListener('scroll', handleScroll);
1242
- return function () {
1243
- return window.removeEventListener('scroll', handleScroll);
1244
- };
1245
- }, []);
1246
- var theme = isNovacThemeEnabled && !scrolled ? THEME_CONFIG.NOVAC : THEME_CONFIG.DEFAULT;
1247
- var hoverColor = theme.hoverColor,
1248
- typographyColor = theme.typographyColor;
1249
- var triggerRavenEventOnHover = react.useCallback(function () {
1250
- var _a;
1251
- var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
1252
- var defaultPayload = {
1253
- action_name: "".concat(MY_ACCOUNT_TEXT.toLowerCase().replace(/[\s-]/g, ''), "_header_hover"),
1254
- action_type: 'hover',
1255
- u_utm_source: utmSource,
1256
- loyalty_type: ravenLoyaltyTypes(loyaltyType)
1257
- };
1258
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
1259
- }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, loyaltyType]);
1260
- return jsxRuntime.jsxs(ctDesignContainer.Container, {
1261
- children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
1262
- display: 'flex',
1263
- padding: '8px 12px',
1264
- alignItems: 'center',
1265
- borderRadius: '12px',
1266
- height: '100%',
1267
- cursor: 'pointer',
1268
- css: {
1269
- columnGap: 8,
1270
- height: 64
1271
- },
1272
- onMouseEnter: function () {
1273
- handleOnMouseEnter(0);
1274
- triggerRavenEventOnHover();
1275
- },
1276
- onMouseLeave: handleOnMouseLeave,
1277
- id: HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID
1278
- }, {
1279
- children: [jsxRuntime.jsx(ctDesignIcons.MyAccount, {
1280
- color: isDropdownVisible ? hoverColor : typographyColor
1281
- }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
1282
- display: 'flex',
1283
- flexDirection: 'row',
1284
- alignItems: 'center'
1285
- }, {
1286
- children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
1287
- variant: 'B2',
1288
- css: {
1289
- cursor: 'pointer'
1290
- },
1291
- colorCode: isDropdownVisible ? hoverColor : typographyColor
1292
- }, {
1293
- children: MY_ACCOUNT_TEXT
1294
- })), jsxRuntime.jsx(ctDesignIcons.ChevronDown, {
1295
- width: 20,
1296
- height: 20,
1297
- fill: isDropdownVisible ? hoverColor : typographyColor
1298
- })]
1299
- }))]
1300
- })), jsxRuntime.jsx(HeaderAnimatedMask, tslib.__assign({
1301
- show: isDropdownVisible,
1302
- marginTop: '64px',
1303
- handleDropdownMouseEnter: handleDropdownMouseEnter,
1304
- handleDropdownMouseLeave: handleDropdownMouseLeave,
1305
- onMaskClick: handleDropdownMouseLeave
1306
- }, {
1307
- children: jsxRuntime.jsx(AccountDropdownContent, {
1308
- isOpen: isDropdownVisible
1309
- })
1310
- }))]
1311
- });
772
+ var _a = useHeaderContext(), isNovacThemeEnabled = _a.isNovacThemeEnabled, ravenEventName = _a.ravenEventName, _b = _a.ravenPayload, ravenPayload = _b === void 0 ? {} : _b, ravenPushCallback = _a.ravenPushCallback, isUserLoggedIn = _a.isUserLoggedIn, loyaltyType = _a.loyaltyType, ravenPageName = _a.ravenPageName;
773
+ var _c = useHoverDropdown({ openDelay: 0 }), isDropdownVisible = _c.isDropdownVisible, handleOnMouseEnter = _c.handleOnMouseEnter, handleOnMouseLeave = _c.handleOnMouseLeave, handleDropdownMouseEnter = _c.handleDropdownMouseEnter, handleDropdownMouseLeave = _c.handleDropdownMouseLeave;
774
+ var _d = react.useState(false), scrolled = _d[0], setScrolled = _d[1];
775
+ react.useEffect(function () {
776
+ var handleScroll = function () {
777
+ setScrolled(window.scrollY >= 50);
778
+ };
779
+ window.addEventListener('scroll', handleScroll);
780
+ return function () { return window.removeEventListener('scroll', handleScroll); };
781
+ }, []);
782
+ var theme = isNovacThemeEnabled && !scrolled ? THEME_CONFIG.NOVAC : THEME_CONFIG.DEFAULT;
783
+ var hoverColor = theme.hoverColor, typographyColor = theme.typographyColor;
784
+ var triggerRavenEventOnHover = react.useCallback(function () {
785
+ var _a;
786
+ var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
787
+ var defaultPayload = {
788
+ action_name: "".concat(MY_ACCOUNT_TEXT.toLowerCase().replace(/[\s-]/g, ''), "_header_hover"),
789
+ action_type: 'hover',
790
+ u_utm_source: utmSource,
791
+ loyalty_type: ravenLoyaltyTypes(loyaltyType),
792
+ };
793
+ ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
794
+ }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, loyaltyType]);
795
+ return (jsxRuntime.jsxs(ctDesignContainer.Container, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', padding: '8px 12px', alignItems: 'center', borderRadius: '12px', height: '100%', cursor: 'pointer', css: { columnGap: 8, height: 64 }, onMouseEnter: function () {
796
+ handleOnMouseEnter(0);
797
+ triggerRavenEventOnHover();
798
+ }, onMouseLeave: handleOnMouseLeave, id: HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID }, { children: [jsxRuntime.jsx(ctDesignIcons.MyAccount, { color: isDropdownVisible ? hoverColor : typographyColor }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', flexDirection: 'row', alignItems: 'center' }, { children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'B2', css: { cursor: 'pointer' }, colorCode: isDropdownVisible ? hoverColor : typographyColor }, { children: MY_ACCOUNT_TEXT })), jsxRuntime.jsx(ctDesignIcons.ChevronDown, { width: 20, height: 20, fill: isDropdownVisible ? hoverColor : typographyColor })] }))] })), jsxRuntime.jsx(HeaderAnimatedMask, tslib.__assign({ show: isDropdownVisible, marginTop: '64px', handleDropdownMouseEnter: handleDropdownMouseEnter, handleDropdownMouseLeave: handleDropdownMouseLeave, onMaskClick: handleDropdownMouseLeave }, { children: jsxRuntime.jsx(AccountDropdownContent, { isOpen: isDropdownVisible }) }))] }));
1312
799
  };
1313
800
 
1314
801
  var Header = function (props) {
1315
- return jsxRuntime.jsx(HeaderProvider, tslib.__assign({
1316
- value: props
1317
- }, {
1318
- children: jsxRuntime.jsx(HeaderContent, {})
1319
- }));
802
+ return (jsxRuntime.jsx(HeaderProvider, tslib.__assign({ value: props }, { children: jsxRuntime.jsx(HeaderContent, {}) })));
1320
803
  };
1321
804
  var HeaderContent = function () {
1322
- var _a;
1323
- var _b = useHeaderContext(),
1324
- onLoginButtonClick = _b.onLoginButtonClick,
1325
- _c = _b.showAllLobs,
1326
- showAllLobs = _c === void 0 ? false : _c,
1327
- isUserLoggedIn = _b.isUserLoggedIn,
1328
- loyaltyType = _b.loyaltyType,
1329
- _d = _b.isNovacThemeEnabled,
1330
- isNovacThemeEnabled = _d === void 0 ? false : _d,
1331
- _e = _b.ravenPayload,
1332
- ravenPayload = _e === void 0 ? {} : _e,
1333
- ravenPushCallback = _b.ravenPushCallback,
1334
- ravenPageName = _b.ravenPageName,
1335
- ravenEventName = _b.ravenEventName;
1336
- var _f = react.useState(false),
1337
- scrolled = _f[0],
1338
- setScrolled = _f[1];
1339
- react.useEffect(function () {
1340
- var handleScroll = function () {
1341
- setScrolled(window.scrollY >= 50);
1342
- };
1343
- window.addEventListener('scroll', handleScroll);
1344
- return function () {
1345
- return window.removeEventListener('scroll', handleScroll);
1346
- };
1347
- }, []);
1348
- var headerTheme = isNovacThemeEnabled && !scrolled ? THEME_CONFIG.NOVAC : THEME_CONFIG.DEFAULT;
1349
- var headerBackground = headerTheme.headerBackground,
1350
- logoFill = headerTheme.logoFill,
1351
- loginButtonColorVariant = headerTheme.loginButtonColorVariant,
1352
- hoverColor = headerTheme.hoverColor,
1353
- fkcompanyColor = headerTheme.fkcompanyColor,
1354
- typographyColor = headerTheme.typographyColor;
1355
- var _g = useHoverDropdown({
1356
- openDelay: 0
1357
- }),
1358
- isDropdownVisible = _g.isDropdownVisible,
1359
- hoveredElemIndex = _g.hoveredElemIndex,
1360
- handleOnMouseEnter = _g.handleOnMouseEnter,
1361
- handleOnMouseLeave = _g.handleOnMouseLeave,
1362
- handleDropdownMouseEnter = _g.handleDropdownMouseEnter,
1363
- handleDropdownMouseLeave = _g.handleDropdownMouseLeave;
1364
- var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
1365
- var createPayload = react.useCallback(function (actionName, actionType) {
1366
- return {
1367
- action_name: actionName,
1368
- action_type: actionType,
1369
- u_utm_source: utmSource,
1370
- loyalty_type: ravenLoyaltyTypes(loyaltyType)
1371
- };
1372
- }, [utmSource, loyaltyType]);
1373
- var handleNavbarOptionsClick = react.useCallback(function (option) {
1374
- if (option.isClickable && option.link) {
1375
- var actionName = "".concat(option.text.toLowerCase().replace(/\s/g, ''), "_header_click");
1376
- var payload = createPayload(actionName, 'click');
1377
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
1378
- window.location.href = option.link;
1379
- }
1380
- }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
1381
- var handleHomeClick = react.useCallback(function () {
1382
- var payload = createPayload('home_header_click', 'click');
1383
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
1384
- window.location.href = '/';
1385
- }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
1386
- var triggerRavenEventOnHover = react.useCallback(function (option) {
1387
- var actionName = "".concat(option.text.toLowerCase().replace(/\s/g, ''), "_header_hover");
1388
- var payload = createPayload(actionName, 'hover');
1389
- ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
1390
- }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
1391
- return jsxRuntime.jsxs(jsxRuntime.Fragment, {
1392
- children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
1393
- display: 'flex',
1394
- top: 0,
1395
- position: 'sticky',
1396
- width: '100%',
1397
- alignItems: 'center',
1398
- justifyContent: 'center',
1399
- zIndex: 1000,
1400
- height: '64px',
1401
- background: headerBackground,
1402
- css: {
1403
- gap: '24px',
1404
- flexShrink: 0,
1405
- borderBottom: headerBackground === 'transparent' ? '' : '1px solid #E6E6E6',
1406
- transition: 'background-color 0.3s ease-in-out, border-bottom 0.3s ease-in-out'
1407
- }
1408
- }, {
1409
- children: jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
1410
- display: 'flex',
1411
- alignItems: 'center',
1412
- justifyContent: 'space-between',
1413
- padding: '0 28px',
1414
- flex: 1,
1415
- css: {
1416
- gap: '24px',
1417
- maxWidth: 1440
805
+ var _a;
806
+ var _b = useHeaderContext(), onLoginButtonClick = _b.onLoginButtonClick, _c = _b.showAllLobs, showAllLobs = _c === void 0 ? false : _c, isUserLoggedIn = _b.isUserLoggedIn, loyaltyType = _b.loyaltyType, _d = _b.isNovacThemeEnabled, isNovacThemeEnabled = _d === void 0 ? false : _d, _e = _b.ravenPayload, ravenPayload = _e === void 0 ? {} : _e, ravenPushCallback = _b.ravenPushCallback, ravenPageName = _b.ravenPageName, ravenEventName = _b.ravenEventName;
807
+ var _f = react.useState(false), scrolled = _f[0], setScrolled = _f[1];
808
+ react.useEffect(function () {
809
+ var handleScroll = function () {
810
+ setScrolled(window.scrollY >= 50);
811
+ };
812
+ window.addEventListener('scroll', handleScroll);
813
+ return function () { return window.removeEventListener('scroll', handleScroll); };
814
+ }, []);
815
+ var headerTheme = isNovacThemeEnabled && !scrolled ? THEME_CONFIG.NOVAC : THEME_CONFIG.DEFAULT;
816
+ var headerBackground = headerTheme.headerBackground, logoFill = headerTheme.logoFill, loginButtonColorVariant = headerTheme.loginButtonColorVariant, hoverColor = headerTheme.hoverColor, fkcompanyColor = headerTheme.fkcompanyColor, typographyColor = headerTheme.typographyColor;
817
+ var _g = useHoverDropdown({
818
+ openDelay: 0,
819
+ }), isDropdownVisible = _g.isDropdownVisible, hoveredElemIndex = _g.hoveredElemIndex, handleOnMouseEnter = _g.handleOnMouseEnter, handleOnMouseLeave = _g.handleOnMouseLeave, handleDropdownMouseEnter = _g.handleDropdownMouseEnter, handleDropdownMouseLeave = _g.handleDropdownMouseLeave;
820
+ var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
821
+ var createPayload = react.useCallback(function (actionName, actionType) { return ({
822
+ action_name: actionName,
823
+ action_type: actionType,
824
+ u_utm_source: utmSource,
825
+ loyalty_type: ravenLoyaltyTypes(loyaltyType),
826
+ }); }, [utmSource, loyaltyType]);
827
+ var handleNavbarOptionsClick = react.useCallback(function (option) {
828
+ if (option.isClickable && option.link) {
829
+ var actionName = "".concat(option.text.toLowerCase().replace(/\s/g, ''), "_header_click");
830
+ var payload = createPayload(actionName, 'click');
831
+ ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
832
+ window.location.href = option.link;
1418
833
  }
1419
- }, {
1420
- children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
1421
- display: 'flex',
1422
- flexDirection: 'row',
1423
- alignItems: 'center',
1424
- justifyContent: 'center',
1425
- cursor: 'pointer',
1426
- onClick: handleHomeClick
1427
- }, {
1428
- children: [jsxRuntime.jsx(ctDesignIcons.CTLogo, {
1429
- fillColor: logoFill
1430
- }), jsxRuntime.jsx(ctDesignDivider.Divider, {
1431
- css: {
1432
- width: 12,
1433
- marginLeft: 2,
1434
- marginRight: 2,
1435
- transform: 'rotate(90deg)',
1436
- borderBottom: '1px solid #e0e0e0'
1437
- }
1438
- }), jsxRuntime.jsx(ctDesignIcons.Fkcompany, {
1439
- color: fkcompanyColor
1440
- })]
1441
- })), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
1442
- display: 'flex',
1443
- flexDirection: 'row',
1444
- alignItems: 'center',
1445
- justifyContent: 'center',
1446
- columnGap: '24px'
1447
- }, {
1448
- children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
1449
- display: 'flex',
1450
- flexDirection: 'row',
1451
- alignItems: 'center',
1452
- justifyContent: 'center',
1453
- columnGap: '4px'
1454
- }, {
1455
- children: NAVBAR_OPTIONS.map(function (option, index) {
1456
- var text = option.text,
1457
- LeftIcon = option.lefticon,
1458
- RightIcon = option.rightIcon,
1459
- isHoverable = option.isHoverable;
1460
- var isHovered = hoveredElemIndex === index;
1461
- return jsxRuntime.jsxs(ctDesignContainer.Container, {
1462
- children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
1463
- onMouseEnter: function () {
1464
- handleOnMouseEnter(index);
1465
- if (option.isHoverable) {
1466
- triggerRavenEventOnHover(option);
1467
- }
1468
- },
1469
- onMouseLeave: handleOnMouseLeave,
1470
- display: 'flex',
1471
- flexDirection: 'row',
1472
- alignItems: 'center',
1473
- padding: '8px 12px 8px 12px',
1474
- cursor: 'pointer',
1475
- position: 'relative',
1476
- columnGap: 8,
1477
- height: '64px',
1478
- onClick: function () {
1479
- return handleNavbarOptionsClick(option);
1480
- }
1481
- }, {
1482
- children: [jsxRuntime.jsx(LeftIcon, {
1483
- color: isHovered ? hoverColor : typographyColor
1484
- }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
1485
- display: 'flex',
1486
- flexDirection: 'row',
1487
- alignItems: 'center'
1488
- }, {
1489
- children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
1490
- variant: 'B2',
1491
- colorCode: isHovered ? hoverColor : typographyColor,
1492
- isClickable: true
1493
- }, {
1494
- children: text
1495
- })), RightIcon && jsxRuntime.jsx(RightIcon, {
1496
- width: 20,
1497
- height: 20,
1498
- fill: isHovered ? hoverColor : typographyColor
1499
- })]
1500
- }))]
1501
- }), "nav-option-".concat(index)), jsxRuntime.jsx(HeaderAnimatedMask, tslib.__assign({
1502
- show: hoveredElemIndex === index && isHoverable && isDropdownVisible,
1503
- marginTop: '64px',
1504
- handleDropdownMouseEnter: handleDropdownMouseEnter,
1505
- handleDropdownMouseLeave: handleDropdownMouseLeave,
1506
- onMaskClick: handleDropdownMouseLeave
1507
- }, {
1508
- children: jsxRuntime.jsx(BusinessDropdownContent, {
1509
- isOpen: hoveredElemIndex === index && isHoverable && isDropdownVisible
1510
- })
1511
- }))]
1512
- });
1513
- })
1514
- })), isUserLoggedIn && jsxRuntime.jsx(ctDesignDivider.Divider, {
1515
- css: {
1516
- width: 12,
1517
- margin: '0 -18px',
1518
- transform: 'rotate(90deg)',
1519
- borderBottom: '1px solid #e0e0e0'
1520
- }
1521
- }), jsxRuntime.jsx(ctDesignContainer.Container, {
1522
- children: isUserLoggedIn ? jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
1523
- display: 'flex',
1524
- flexDirection: 'row',
1525
- alignItems: 'center'
1526
- }, {
1527
- children: jsxRuntime.jsx(UserAccount, {})
1528
- })) : jsxRuntime.jsx(ctDesignButton.Button, tslib.__assign({
1529
- onClick: onLoginButtonClick,
1530
- css: tslib.__assign({
1531
- width: 153,
1532
- height: 40
1533
- }, getLoginButtonBgColorStyles(headerBackground === 'transparent')),
1534
- loading: false,
1535
- color: loginButtonColorVariant,
1536
- variant: ctDesignButton.ButtonVariant.OUTLINE
1537
- }, {
1538
- children: LOG_IN_TEXT
1539
- }))
1540
- })]
1541
- }))]
1542
- }))
1543
- })), showAllLobs && jsxRuntime.jsx(LobsHeader, {})]
1544
- });
834
+ }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
835
+ var handleHomeClick = react.useCallback(function () {
836
+ var payload = createPayload('home_header_click', 'click');
837
+ ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
838
+ window.location.href = '/';
839
+ }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
840
+ var triggerRavenEventOnHover = react.useCallback(function (option) {
841
+ var actionName = "".concat(option.text.toLowerCase().replace(/\s/g, ''), "_header_hover");
842
+ var payload = createPayload(actionName, 'hover');
843
+ ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
844
+ }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
845
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ display: 'flex', top: 0, position: 'sticky', width: '100%', alignItems: 'center', justifyContent: 'center', zIndex: 1000, height: '64px', background: headerBackground, css: {
846
+ gap: '24px',
847
+ flexShrink: 0,
848
+ borderBottom: headerBackground === 'transparent' ? '' : '1px solid #E6E6E6',
849
+ transition: 'background-color 0.3s ease-in-out, border-bottom 0.3s ease-in-out',
850
+ } }, { children: jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 28px', flex: 1, css: {
851
+ gap: '24px',
852
+ maxWidth: 1440,
853
+ } }, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', onClick: handleHomeClick }, { children: [jsxRuntime.jsx(ctDesignIcons.CTLogo, { fillColor: logoFill }), jsxRuntime.jsx(ctDesignDivider.Divider, { css: {
854
+ width: 12,
855
+ marginLeft: 2,
856
+ marginRight: 2,
857
+ transform: 'rotate(90deg)',
858
+ borderBottom: '1px solid #e0e0e0',
859
+ } }), jsxRuntime.jsx(ctDesignIcons.Fkcompany, { color: fkcompanyColor })] })), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', columnGap: '24px' }, { children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', columnGap: '4px' }, { children: NAVBAR_OPTIONS.map(function (option, index) {
860
+ var text = option.text, LeftIcon = option.lefticon, RightIcon = option.rightIcon, isHoverable = option.isHoverable;
861
+ var isHovered = hoveredElemIndex === index;
862
+ return (jsxRuntime.jsxs(ctDesignContainer.Container, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ onMouseEnter: function () {
863
+ handleOnMouseEnter(index);
864
+ if (option.isHoverable) {
865
+ triggerRavenEventOnHover(option);
866
+ }
867
+ }, onMouseLeave: handleOnMouseLeave, display: 'flex', flexDirection: 'row', alignItems: 'center', padding: '8px 12px 8px 12px', cursor: 'pointer', position: 'relative', columnGap: 8, height: '64px', onClick: function () { return handleNavbarOptionsClick(option); } }, { children: [jsxRuntime.jsx(LeftIcon, { color: isHovered ? hoverColor : typographyColor }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', flexDirection: 'row', alignItems: 'center' }, { children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'B2', colorCode: isHovered ? hoverColor : typographyColor, isClickable: true }, { children: text })), RightIcon && (jsxRuntime.jsx(RightIcon, { width: 20, height: 20, fill: isHovered ? hoverColor : typographyColor }))] }))] }), "nav-option-".concat(index)), jsxRuntime.jsx(HeaderAnimatedMask, tslib.__assign({ show: hoveredElemIndex === index && isHoverable && isDropdownVisible, marginTop: '64px', handleDropdownMouseEnter: handleDropdownMouseEnter, handleDropdownMouseLeave: handleDropdownMouseLeave, onMaskClick: handleDropdownMouseLeave }, { children: jsxRuntime.jsx(BusinessDropdownContent, { isOpen: hoveredElemIndex === index && isHoverable && isDropdownVisible }) }))] }));
868
+ }) })), isUserLoggedIn && (jsxRuntime.jsx(ctDesignDivider.Divider, { css: {
869
+ width: 12,
870
+ margin: '0 -18px',
871
+ transform: 'rotate(90deg)',
872
+ borderBottom: '1px solid #e0e0e0',
873
+ } })), jsxRuntime.jsx(ctDesignContainer.Container, { children: isUserLoggedIn ? (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ display: 'flex', flexDirection: 'row', alignItems: 'center' }, { children: jsxRuntime.jsx(UserAccount, {}) }))) : (jsxRuntime.jsx(ctDesignButton.Button, tslib.__assign({ onClick: onLoginButtonClick, css: tslib.__assign({ width: 153, height: 40 }, getLoginButtonBgColorStyles(headerBackground === 'transparent')), loading: false, color: loginButtonColorVariant, variant: ctDesignButton.ButtonVariant.OUTLINE }, { children: LOG_IN_TEXT }))) })] }))] })) })), showAllLobs && jsxRuntime.jsx(LobsHeader, {})] }));
1545
874
  };
1546
875
 
1547
876
  exports.Header = Header;