@cleartrip/ct-design-header 1.2.0-SNAPSHOT-snapshot-anim.0 → 1.2.0-SNAPSHOT-styled-header-test.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 (23) hide show
  1. package/dist/BusinessDropdown/index.d.ts +5 -1
  2. package/dist/BusinessDropdown/index.d.ts.map +1 -1
  3. package/dist/Header.d.ts.map +1 -1
  4. package/dist/LobsHeader/type.d.ts +8 -1
  5. package/dist/LobsHeader/type.d.ts.map +1 -1
  6. package/dist/UserAccount/UserAccountDropdown.d.ts +0 -1
  7. package/dist/UserAccount/UserAccountDropdown.d.ts.map +1 -1
  8. package/dist/UserAccount/index.d.ts.map +1 -1
  9. package/dist/ct-design-header.browser.cjs.js +1 -1
  10. package/dist/ct-design-header.browser.cjs.js.map +1 -1
  11. package/dist/ct-design-header.browser.esm.js +1 -1
  12. package/dist/ct-design-header.browser.esm.js.map +1 -1
  13. package/dist/ct-design-header.cjs.js +1025 -453
  14. package/dist/ct-design-header.cjs.js.map +1 -1
  15. package/dist/ct-design-header.esm.js +1022 -454
  16. package/dist/ct-design-header.esm.js.map +1 -1
  17. package/dist/ct-design-header.umd.js +1038 -457
  18. package/dist/ct-design-header.umd.js.map +1 -1
  19. package/dist/hooks/useDropdownAnimation.d.ts +1 -2
  20. package/dist/hooks/useDropdownAnimation.d.ts.map +1 -1
  21. package/dist/type.d.ts +6 -1
  22. package/dist/type.d.ts.map +1 -1
  23. package/package.json +8 -8
package/dist/ct-design-header.umd.js CHANGED
@@ -1,8 +1,12 @@
1
1
  (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('@cleartrip/ct-design-container'), require('@cleartrip/ct-design-typography'), require('@cleartrip/ct-design-button'), require('@cleartrip/ct-design-divider'), require('@cleartrip/ct-design-icons'), require('react'), require('@cleartrip/ct-design-shimmer')) :
3
- typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', '@cleartrip/ct-design-container', '@cleartrip/ct-design-typography', '@cleartrip/ct-design-button', '@cleartrip/ct-design-divider', '@cleartrip/ct-design-icons', 'react', '@cleartrip/ct-design-shimmer'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemHeader = {}, global.jsxRuntime, global.ctDesignContainer, global.ctDesignTypography, global.ctDesignButton, global.ctDesignDivider, global.ctDesignIcons, global.React, global.ctDesignShimmer));
5
- })(this, (function (exports, jsxRuntime, ctDesignContainer, ctDesignTypography, ctDesignButton, ctDesignDivider, ctDesignIcons, react, ctDesignShimmer) { 'use strict';
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('@cleartrip/ct-design-container'), require('@cleartrip/ct-design-typography'), require('@cleartrip/ct-design-button'), require('@cleartrip/ct-design-divider'), require('@cleartrip/ct-design-icons'), require('react'), require('@cleartrip/ct-design-shimmer'), require('styled-components')) :
3
+ typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', '@cleartrip/ct-design-container', '@cleartrip/ct-design-typography', '@cleartrip/ct-design-button', '@cleartrip/ct-design-divider', '@cleartrip/ct-design-icons', 'react', '@cleartrip/ct-design-shimmer', 'styled-components'], factory) :
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemHeader = {}, global.jsxRuntime, global.ctDesignContainer, global.ctDesignTypography, global.ctDesignButton, global.ctDesignDivider, global.ctDesignIcons, global.React, global.ctDesignShimmer, global.styled));
5
+ })(this, (function (exports, jsxRuntime, ctDesignContainer, ctDesignTypography, ctDesignButton, ctDesignDivider, ctDesignIcons, react, ctDesignShimmer, styled) { 'use strict';
6
+
7
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
8
+
9
+ var styled__default = /*#__PURE__*/_interopDefault(styled);
6
10
 
7
11
  /******************************************************************************
8
12
  Copyright (c) Microsoft Corporation.
@@ -30,6 +34,16 @@
30
34
  };
31
35
  return __assign.apply(this, arguments);
32
36
  };
37
+ function __makeTemplateObject(cooked, raw) {
38
+ if (Object.defineProperty) {
39
+ Object.defineProperty(cooked, "raw", {
40
+ value: raw
41
+ });
42
+ } else {
43
+ cooked.raw = raw;
44
+ }
45
+ return cooked;
46
+ }
33
47
  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
34
48
  var e = new Error(message);
35
49
  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -38,343 +52,483 @@
38
52
  var OFFERS_URL = 'all-offers/?categories=flights';
39
53
  var MY_TRIPS_URL = '/account/trips';
40
54
  var SUPPORT_URL = '/support';
41
- var NAVBAR_OPTIONS = [
42
- {
43
- lefticon: ctDesignIcons.Offers,
44
- text: 'Offers',
45
- isHoverable: false,
46
- isClickable: true,
47
- link: OFFERS_URL,
48
- },
49
- {
50
- lefticon: ctDesignIcons.BusinessBag,
51
- text: 'Business',
52
- rightIcon: ctDesignIcons.ChevronDown,
53
- isHoverable: true,
54
- },
55
- {
56
- lefticon: ctDesignIcons.MyTrips,
57
- text: 'My Trips',
58
- isHoverable: false,
59
- isClickable: true,
60
- link: MY_TRIPS_URL,
61
- },
62
- {
63
- lefticon: ctDesignIcons.SupportIcon,
64
- text: 'Support',
65
- isHoverable: false,
66
- isClickable: true,
67
- link: SUPPORT_URL,
68
- },
69
- ];
55
+ var NAVBAR_OPTIONS = [{
56
+ lefticon: ctDesignIcons.Offers,
57
+ text: 'Offers',
58
+ isHoverable: false,
59
+ isClickable: true,
60
+ link: OFFERS_URL
61
+ }, {
62
+ lefticon: ctDesignIcons.BusinessBag,
63
+ text: 'Business',
64
+ rightIcon: ctDesignIcons.ChevronDown,
65
+ isHoverable: true
66
+ }, {
67
+ lefticon: ctDesignIcons.MyTrips,
68
+ text: 'My Trips',
69
+ isHoverable: false,
70
+ isClickable: true,
71
+ link: MY_TRIPS_URL
72
+ }, {
73
+ lefticon: ctDesignIcons.SupportIcon,
74
+ text: 'Support',
75
+ isHoverable: false,
76
+ isClickable: true,
77
+ link: SUPPORT_URL
78
+ }];
70
79
  var LOBS = {
71
- FLIGHTS: 'Flights',
72
- HOTELS: 'Hotels',
73
- TRAIN: 'Trains',
74
- PACKAGES: 'Packages',
75
- BUSES: 'Buses',
80
+ FLIGHTS: 'Flights',
81
+ HOTELS: 'Hotels',
82
+ TRAIN: 'Trains',
83
+ PACKAGES: 'Packages',
84
+ BUSES: 'Buses'
76
85
  };
77
- var LOB_DATA = [
78
- {
79
- title: LOBS.FLIGHTS,
80
- image: 'https://rukmini-ct.flixcart.com/f_auto,w_48,h_48,dpr_2/offermgmt-prod/offermgmt/images/banner/flight_uhp.png?cache=true',
81
- link: '/flights',
82
- },
83
- {
84
- title: LOBS.HOTELS,
85
- image: 'https://rukmini-ct.flixcart.com/f_auto,w_48,h_48,dpr_2/offermgmt-prod/offermgmt/images/banner/hotel_uhp.png?cache=true',
86
- link: '/hotels',
87
- },
88
- {
89
- title: LOBS.BUSES,
90
- image: 'https://rukmini-ct.flixcart.com/f_auto,w_40,h_40,dpr_2/offermgmt-prod/offermgmt/images/banner/bus_uhp.png?cache=true',
91
- link: '/bus',
92
- },
93
- {
94
- title: LOBS.TRAIN,
95
- image: 'https://rukmini-ct.flixcart.com/f_auto,w_40,h_40,dpr_2/offermgmt-prod/offermgmt/images/banner/train_uhp.png?cache=true',
96
- link: '/',
97
- },
98
- {
99
- title: LOBS.PACKAGES,
100
- image: 'https://rukmini-ct.flixcart.com/f_auto,w_40,h_40,dpr_2/offermgmt-prod/offermgmt/images/banner/holiday_uhp.png?cache=true',
101
- link: '/#',
102
- },
103
- ];
104
- var bdConfig = [
105
- {
106
- title: 'AgentBox',
107
- subtitle: 'For travel agents',
108
- details: 'One-stop travel solution offering the best deals to our travel agency partners',
109
- },
110
- {
111
- title: 'OutOfOffice',
112
- subtitle: 'For startups, corporates and SMEs',
113
- details: 'Manage corporate business travel, smartly',
114
- },
115
- {
116
- title: 'MICE',
117
- subtitle: 'For corporate events',
118
- details: 'An end-to-end management solution for all your corporate events',
119
- },
120
- {
121
- title: 'API',
122
- subtitle: 'For developers',
123
- details: 'Unlock seamless integration and scale with our powerful, reliable APIs',
124
- },
125
- ];
86
+ var LOB_DATA = [{
87
+ title: LOBS.FLIGHTS,
88
+ image: 'https://rukmini-ct.flixcart.com/f_auto,w_48,h_48,dpr_2/offermgmt-prod/offermgmt/images/banner/flight_uhp.png?cache=true',
89
+ link: '/flights'
90
+ }, {
91
+ title: LOBS.HOTELS,
92
+ image: 'https://rukmini-ct.flixcart.com/f_auto,w_48,h_48,dpr_2/offermgmt-prod/offermgmt/images/banner/hotel_uhp.png?cache=true',
93
+ link: '/hotels'
94
+ }, {
95
+ title: LOBS.BUSES,
96
+ image: 'https://rukmini-ct.flixcart.com/f_auto,w_40,h_40,dpr_2/offermgmt-prod/offermgmt/images/banner/bus_uhp.png?cache=true',
97
+ link: '/bus'
98
+ }, {
99
+ title: LOBS.TRAIN,
100
+ image: 'https://rukmini-ct.flixcart.com/f_auto,w_40,h_40,dpr_2/offermgmt-prod/offermgmt/images/banner/train_uhp.png?cache=true',
101
+ link: '/'
102
+ }, {
103
+ title: LOBS.PACKAGES,
104
+ image: 'https://rukmini-ct.flixcart.com/f_auto,w_40,h_40,dpr_2/offermgmt-prod/offermgmt/images/banner/holiday_uhp.png?cache=true',
105
+ link: '/#'
106
+ }];
107
+ var bdConfig = [{
108
+ title: 'AgentBox',
109
+ subtitle: 'For travel agents',
110
+ details: 'One-stop travel solution offering the best deals to our travel agency partners'
111
+ }, {
112
+ title: 'OutOfOffice',
113
+ subtitle: 'For startups, corporates and SMEs',
114
+ details: 'Manage corporate business travel, smartly'
115
+ }, {
116
+ title: 'MICE',
117
+ subtitle: 'For corporate events',
118
+ details: 'An end-to-end management solution for all your corporate events'
119
+ }, {
120
+ title: 'API',
121
+ subtitle: 'For developers',
122
+ details: 'Unlock seamless integration and scale with our powerful, reliable APIs'
123
+ }];
126
124
  var BUSINESS_DROPDOWN_HEADING = 'Other business services';
127
125
 
128
126
  var LobsHeader = function (_a) {
129
- var selectedLOB = _a.selectedLOB;
130
- return (jsxRuntime.jsx(ctDesignContainer.Container, __assign({ className: 'flex p-4 flex-middle flex-center p-sticky', css: {
131
- gap: 40,
132
- height: 64,
133
- background: ' #F3F5FA',
134
- top: 64,
135
- zIndex: 2,
136
- } }, { children: LOB_DATA.map(function (item, index) {
137
- return (jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ className: 'flex flex-middle c-pointer', css: {
138
- gap: 8,
139
- background: selectedLOB === item.title ? '#FFFFFF' : 'transparent',
140
- borderRadius: selectedLOB === item.title ? '40px' : '0',
141
- padding: selectedLOB === item.title ? '8px 16px 8px 8px' : '0',
142
- }, onClick: function () {
143
- window.location.href = item.link;
144
- } }, { children: [jsxRuntime.jsx("img", { src: item.image, alt: item.title, width: 32, height: 32 }), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({ variant: 'P1', style: { fontWeight: selectedLOB === item.title ? 600 : 500 }, isClickable: true }, { children: item.title }))] }), index));
145
- }) })));
127
+ var selectedLOB = _a.selectedLOB;
128
+ return jsxRuntime.jsx(ctDesignContainer.Container, __assign({
129
+ className: 'flex p-4 flex-middle flex-center p-sticky',
130
+ css: {
131
+ gap: 40,
132
+ height: 64,
133
+ background: ' #F3F5FA',
134
+ top: 64,
135
+ zIndex: 2
136
+ }
137
+ }, {
138
+ children: LOB_DATA.map(function (item, index) {
139
+ return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
140
+ className: 'flex flex-middle c-pointer',
141
+ css: {
142
+ gap: 8,
143
+ background: selectedLOB === item.title ? '#FFFFFF' : 'transparent',
144
+ borderRadius: selectedLOB === item.title ? '40px' : '0',
145
+ padding: selectedLOB === item.title ? '8px 16px 8px 8px' : '0'
146
+ },
147
+ onClick: function () {
148
+ window.location.href = item.link;
149
+ }
150
+ }, {
151
+ children: [jsxRuntime.jsx("img", {
152
+ src: item.image,
153
+ alt: item.title,
154
+ width: 32,
155
+ height: 32
156
+ }), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
157
+ variant: 'P1',
158
+ style: {
159
+ fontWeight: selectedLOB === item.title ? 600 : 500
160
+ },
161
+ isClickable: true
162
+ }, {
163
+ children: item.title
164
+ }))]
165
+ }), index);
166
+ })
167
+ }));
146
168
  };
147
169
 
148
170
  var useDelayedUnmount = function (show, unmountDelay) {
149
- var _a = react.useState(show), showComponent = _a[0], setShowComponent = _a[1];
150
- var timerRef = react.useRef();
151
- react.useEffect(function () {
152
- if (!show) {
153
- timerRef.current = setTimeout(function () {
154
- setShowComponent(false);
155
- }, unmountDelay);
156
- }
157
- else {
158
- setShowComponent(show);
159
- }
160
- return function () {
161
- (timerRef === null || timerRef === void 0 ? void 0 : timerRef.current) && clearTimeout(timerRef.current);
162
- };
163
- }, [show]);
164
- return showComponent;
171
+ var _a = react.useState(show),
172
+ showComponent = _a[0],
173
+ 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
+ } else {
181
+ setShowComponent(show);
182
+ }
183
+ return function () {
184
+ (timerRef === null || timerRef === void 0 ? void 0 : timerRef.current) && clearTimeout(timerRef.current);
185
+ };
186
+ }, [show]);
187
+ return showComponent;
165
188
  };
166
189
  var useMountTransition = function (isMounted, unmountDelay) {
167
- var _a = react.useState(false), hasTransitionedIn = _a[0], setHasTransitionedIn = _a[1];
168
- var timeoutIdRef = react.useRef();
169
- react.useEffect(function () {
170
- if (isMounted && !hasTransitionedIn) {
171
- setTimeout(function () {
172
- setHasTransitionedIn(true);
173
- }, 0);
174
- }
175
- else if (!isMounted && hasTransitionedIn) {
176
- timeoutIdRef.current = setTimeout(function () { return setHasTransitionedIn(false); }, unmountDelay);
177
- }
178
- return function () {
179
- if (timeoutIdRef && timeoutIdRef.current) {
180
- clearTimeout(timeoutIdRef.current);
181
- }
182
- };
183
- }, [unmountDelay, isMounted]);
184
- return hasTransitionedIn;
190
+ var _a = react.useState(false),
191
+ hasTransitionedIn = _a[0],
192
+ setHasTransitionedIn = _a[1];
193
+ var timeoutIdRef = react.useRef();
194
+ react.useEffect(function () {
195
+ if (isMounted && !hasTransitionedIn) {
196
+ setTimeout(function () {
197
+ setHasTransitionedIn(true);
198
+ }, 0);
199
+ } else if (!isMounted && hasTransitionedIn) {
200
+ timeoutIdRef.current = setTimeout(function () {
201
+ return setHasTransitionedIn(false);
202
+ }, unmountDelay);
203
+ }
204
+ return function () {
205
+ if (timeoutIdRef && timeoutIdRef.current) {
206
+ clearTimeout(timeoutIdRef.current);
207
+ }
208
+ };
209
+ }, [unmountDelay, isMounted]);
210
+ return hasTransitionedIn;
185
211
  };
186
212
 
187
213
  function HeaderAnimatedMask(_a) {
188
- var children = _a.children, onMaskClick = _a.onMaskClick, show = _a.show, marginTop = _a.marginTop, handleDropdownMouseEnter = _a.handleDropdownMouseEnter, handleDropdownMouseLeave = _a.handleDropdownMouseLeave;
189
- react.useEffect(function () {
190
- if (show) {
191
- document.body.style.overflow = 'hidden';
192
- }
193
- return function () {
194
- document.body.style.overflow = 'initial';
195
- };
196
- }, [show]);
197
- var showFlagProxy = useDelayedUnmount(show, 300);
198
- var triggerTransition = useMountTransition(show, 100);
199
- var triggerOpenTransition = triggerTransition;
200
- console.log(show, showFlagProxy, 'custom hook');
201
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showFlagProxy && (jsxRuntime.jsx(ctDesignContainer.Container, { id: 'mask-container', css: {
202
- position: 'fixed',
203
- backgroundColor: '#000',
204
- opacity: triggerOpenTransition ? 0.4 : 0,
205
- width: '100%',
206
- height: '100vh',
207
- left: 0,
208
- top: marginTop || 0,
209
- zIndex: 9,
210
- transition: 'opacity 300ms ease-in',
211
- }, onClick: onMaskClick })), showFlagProxy && (jsxRuntime.jsx(ctDesignContainer.Container, __assign({ onMouseEnter: handleDropdownMouseEnter, onMouseLeave: handleDropdownMouseLeave }, { children: children })))] }));
214
+ var children = _a.children,
215
+ onMaskClick = _a.onMaskClick,
216
+ show = _a.show,
217
+ marginTop = _a.marginTop,
218
+ handleDropdownMouseEnter = _a.handleDropdownMouseEnter,
219
+ handleDropdownMouseLeave = _a.handleDropdownMouseLeave;
220
+ react.useEffect(function () {
221
+ if (show) {
222
+ document.body.style.overflow = 'hidden';
223
+ }
224
+ return function () {
225
+ document.body.style.overflow = 'initial';
226
+ };
227
+ }, [show]);
228
+ var showFlagProxy = useDelayedUnmount(show, 300);
229
+ var triggerTransition = useMountTransition(show, 100);
230
+ var triggerOpenTransition = triggerTransition;
231
+ console.log(show, showFlagProxy, 'custom hook');
232
+ return jsxRuntime.jsxs(jsxRuntime.Fragment, {
233
+ children: [showFlagProxy && jsxRuntime.jsx(ctDesignContainer.Container, {
234
+ id: 'mask-container',
235
+ css: {
236
+ position: 'fixed',
237
+ backgroundColor: '#000',
238
+ opacity: triggerOpenTransition ? 0.4 : 0,
239
+ width: '100%',
240
+ height: '100vh',
241
+ left: 0,
242
+ top: marginTop || 0,
243
+ zIndex: 9,
244
+ transition: 'opacity 300ms ease-in'
245
+ },
246
+ onClick: onMaskClick
247
+ }), showFlagProxy && jsxRuntime.jsx(ctDesignContainer.Container, __assign({
248
+ onMouseEnter: handleDropdownMouseEnter,
249
+ onMouseLeave: handleDropdownMouseLeave
250
+ }, {
251
+ children: children
252
+ }))]
253
+ });
212
254
  }
213
255
 
214
256
  var MIN_CLOSE_DELAY = 150;
215
257
  var useHoverDropdown = function (_a) {
216
- var _b = _a === void 0 ? {} : _a, _c = _b.closeDelay, closeDelayArg = _c === void 0 ? 300 : _c, _d = _b.openDelay, openDelay = _d === void 0 ? 500 : _d;
217
- var closeDelay = Math.max(closeDelayArg, MIN_CLOSE_DELAY);
218
- var _e = react.useState(false), isDropdownVisible = _e[0], setIsDropdownVisible = _e[1];
219
- var _f = react.useState(null), hoveredElemIndex = _f[0], setHoveredElemIndex = _f[1];
220
- var timeoutRef = react.useRef(null);
221
- var openTimeoutRef = react.useRef(null);
222
- var cancelElementHover = react.useRef(false);
223
- var handleOnMouseEnter = react.useCallback(function (index) {
224
- console.log('handleOnMouseEnter');
225
- if (timeoutRef.current)
226
- clearTimeout(timeoutRef.current);
227
- if (openTimeoutRef.current)
228
- clearTimeout(openTimeoutRef.current);
229
- cancelElementHover.current = false;
230
- openTimeoutRef.current = setTimeout(function () {
231
- setIsDropdownVisible(true);
232
- if (!cancelElementHover.current) {
233
- setHoveredElemIndex(index);
234
- }
235
- }, openDelay);
236
- }, [openDelay]);
237
- var handleOnMouseLeave = react.useCallback(function () {
238
- console.log('handleMouseLeave');
239
- cancelElementHover.current = true;
240
- timeoutRef.current = setTimeout(function () {
241
- setIsDropdownVisible(false);
242
- setHoveredElemIndex(null);
243
- }, closeDelay);
244
- }, [closeDelay]);
245
- var handleDropdownMouseEnter = react.useCallback(function () {
246
- console.log('handleDropdownMouseEnter');
247
- if (timeoutRef.current)
248
- clearTimeout(timeoutRef.current);
249
- }, []);
250
- var handleDropdownMouseLeave = react.useCallback(function () {
251
- console.log('handleDropdownMouseLeave');
252
- cancelElementHover.current = true;
253
- (timeoutRef === null || timeoutRef === void 0 ? void 0 : timeoutRef.current) && clearTimeout(timeoutRef.current);
254
- timeoutRef.current = setTimeout(function () {
255
- setIsDropdownVisible(false);
256
- setHoveredElemIndex(null);
257
- }, closeDelay);
258
- }, []);
259
- react.useEffect(function () {
260
- var handleMouseLeaveWindow = function (event) {
261
- if (event.clientY <= 0) {
262
- setIsDropdownVisible(false);
263
- setHoveredElemIndex(null);
264
- }
265
- };
266
- window.addEventListener('mouseleave', handleMouseLeaveWindow);
267
- return function () {
268
- window.removeEventListener('mouseleave', handleMouseLeaveWindow);
269
- };
270
- }, []);
271
- return {
272
- isDropdownVisible: isDropdownVisible,
273
- hoveredElemIndex: hoveredElemIndex,
274
- handleOnMouseEnter: handleOnMouseEnter,
275
- handleOnMouseLeave: handleOnMouseLeave,
276
- handleDropdownMouseEnter: handleDropdownMouseEnter,
277
- handleDropdownMouseLeave: handleDropdownMouseLeave,
258
+ var _b = _a === void 0 ? {} : _a,
259
+ _c = _b.closeDelay,
260
+ closeDelayArg = _c === void 0 ? 300 : _c,
261
+ _d = _b.openDelay,
262
+ openDelay = _d === void 0 ? 500 : _d;
263
+ var closeDelay = Math.max(closeDelayArg, MIN_CLOSE_DELAY);
264
+ var _e = react.useState(false),
265
+ isDropdownVisible = _e[0],
266
+ setIsDropdownVisible = _e[1];
267
+ var _f = react.useState(null),
268
+ hoveredElemIndex = _f[0],
269
+ setHoveredElemIndex = _f[1];
270
+ var timeoutRef = react.useRef(null);
271
+ var openTimeoutRef = react.useRef(null);
272
+ var cancelElementHover = react.useRef(false);
273
+ var handleOnMouseEnter = react.useCallback(function (index) {
274
+ console.log('handleOnMouseEnter');
275
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
276
+ if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current);
277
+ cancelElementHover.current = false;
278
+ openTimeoutRef.current = setTimeout(function () {
279
+ setIsDropdownVisible(true);
280
+ if (!cancelElementHover.current) {
281
+ setHoveredElemIndex(index);
282
+ }
283
+ }, openDelay);
284
+ }, [openDelay]);
285
+ var handleOnMouseLeave = react.useCallback(function () {
286
+ console.log('handleMouseLeave');
287
+ cancelElementHover.current = true;
288
+ timeoutRef.current = setTimeout(function () {
289
+ setIsDropdownVisible(false);
290
+ setHoveredElemIndex(null);
291
+ }, closeDelay);
292
+ }, [closeDelay]);
293
+ var handleDropdownMouseEnter = react.useCallback(function () {
294
+ console.log('handleDropdownMouseEnter');
295
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
296
+ }, []);
297
+ var handleDropdownMouseLeave = react.useCallback(function () {
298
+ console.log('handleDropdownMouseLeave');
299
+ cancelElementHover.current = true;
300
+ (timeoutRef === null || timeoutRef === void 0 ? void 0 : timeoutRef.current) && clearTimeout(timeoutRef.current);
301
+ timeoutRef.current = setTimeout(function () {
302
+ setIsDropdownVisible(false);
303
+ setHoveredElemIndex(null);
304
+ }, closeDelay);
305
+ }, []);
306
+ react.useEffect(function () {
307
+ var handleMouseLeaveWindow = function (event) {
308
+ if (event.clientY <= 0) {
309
+ setIsDropdownVisible(false);
310
+ setHoveredElemIndex(null);
311
+ }
278
312
  };
313
+ window.addEventListener('mouseleave', handleMouseLeaveWindow);
314
+ return function () {
315
+ window.removeEventListener('mouseleave', handleMouseLeaveWindow);
316
+ };
317
+ }, []);
318
+ return {
319
+ isDropdownVisible: isDropdownVisible,
320
+ hoveredElemIndex: hoveredElemIndex,
321
+ handleOnMouseEnter: handleOnMouseEnter,
322
+ handleOnMouseLeave: handleOnMouseLeave,
323
+ handleDropdownMouseEnter: handleDropdownMouseEnter,
324
+ handleDropdownMouseLeave: handleDropdownMouseLeave
325
+ };
279
326
  };
280
327
 
281
- var useDropdownAnimation = function () {
282
- var containerRef = react.useRef(null);
283
- var openDropdown = function () {
328
+ var useDropdownAnimation = function (isOpen) {
329
+ var containerRef = react.useRef(null);
330
+ var openDropdown = function () {
331
+ if (containerRef.current) {
332
+ var fullHeight_1 = containerRef.current.scrollHeight;
333
+ containerRef.current.style.maxHeight = "".concat(fullHeight_1 / 2, "px");
334
+ containerRef.current.style.opacity = '0';
335
+ requestAnimationFrame(function () {
284
336
  if (containerRef.current) {
285
- var fullHeight_1 = containerRef.current.scrollHeight;
286
- containerRef.current.style.maxHeight = "".concat(fullHeight_1 / 2, "px");
287
- containerRef.current.style.opacity = '0';
288
- requestAnimationFrame(function () {
289
- if (containerRef.current) {
290
- containerRef.current.style.transition = 'max-height 0.3s ease-in-out, opacity 0.3s ease-in-out';
291
- containerRef.current.style.maxHeight = "".concat(fullHeight_1, "px");
292
- containerRef.current.style.opacity = '1';
293
- }
294
- });
337
+ containerRef.current.style.transition = 'max-height 0.3s ease-in-out, opacity 0.3s ease-in-out';
338
+ containerRef.current.style.maxHeight = "".concat(fullHeight_1, "px");
339
+ containerRef.current.style.opacity = '1';
295
340
  }
296
- };
297
- react.useEffect(function () {
298
- openDropdown();
299
- }, []);
300
- return { containerRef: containerRef, openDropdown: openDropdown };
341
+ });
342
+ }
343
+ };
344
+ var closeDropdown = function () {
345
+ if (containerRef.current) {
346
+ var fullHeight = containerRef.current.scrollHeight;
347
+ containerRef.current.style.transition = 'max-height 0.3s ease-in-out, opacity 0.3s ease-in-out';
348
+ containerRef.current.style.maxHeight = "".concat(fullHeight / 2, "px");
349
+ containerRef.current.style.opacity = '0';
350
+ setTimeout(function () {
351
+ if (containerRef.current) {
352
+ containerRef.current.style.maxHeight = '0px';
353
+ }
354
+ }, 300);
355
+ }
356
+ };
357
+ react.useEffect(function () {
358
+ if (isOpen) {
359
+ openDropdown();
360
+ } else {
361
+ closeDropdown();
362
+ }
363
+ }, [isOpen]);
364
+ return {
365
+ containerRef: containerRef
366
+ };
301
367
  };
302
368
 
303
- var BusinessDropdownContent = function () {
304
- var _a = react.useState(0), leftPosition = _a[0], setLeftPosition = _a[1];
305
- var containerRef = useDropdownAnimation().containerRef;
306
- react.useEffect(function () {
307
- var updatePosition = function () {
308
- if (containerRef.current) {
309
- var screenWidth = window.innerWidth;
310
- var containerWidth = containerRef.current.offsetWidth || 0;
311
- setLeftPosition((screenWidth - containerWidth) / 2);
369
+ var BusinessDropdownContent = function (_a) {
370
+ var isOpen = _a.isOpen;
371
+ var _b = react.useState(0),
372
+ leftPosition = _b[0],
373
+ setLeftPosition = _b[1];
374
+ var containerRef = useDropdownAnimation(isOpen).containerRef;
375
+ react.useEffect(function () {
376
+ var updatePosition = function () {
377
+ if (containerRef.current) {
378
+ var screenWidth = window.innerWidth;
379
+ var containerWidth = containerRef.current.offsetWidth || 0;
380
+ setLeftPosition((screenWidth - containerWidth) / 2);
381
+ }
382
+ };
383
+ updatePosition();
384
+ window.addEventListener('resize', updatePosition);
385
+ return function () {
386
+ return window.removeEventListener('resize', updatePosition);
387
+ };
388
+ }, []);
389
+ return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
390
+ ref: containerRef,
391
+ className: 'bg-neutral-100 o-hidden',
392
+ css: {
393
+ top: '76px',
394
+ position: 'fixed',
395
+ left: "".concat(leftPosition, "px"),
396
+ borderRadius: 24,
397
+ boxShadow: '0px 8px 24px 0px rgba(26, 26, 26, 0.10)',
398
+ width: 'fit-content',
399
+ zIndex: 1002,
400
+ opacity: 0
401
+ }
402
+ }, {
403
+ children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({
404
+ className: 'px-6 py-5',
405
+ backgroundColor: '#FFF1EC'
406
+ }, {
407
+ children: jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
408
+ variant: 'HM2',
409
+ style: {
410
+ lineHeight: '24px'
411
+ }
412
+ }, {
413
+ children: BUSINESS_DROPDOWN_HEADING
414
+ }))
415
+ })), jsxRuntime.jsx(ctDesignContainer.Container, __assign({
416
+ className: 'flex flex-row p-6',
417
+ css: {
418
+ columnGap: '48px',
419
+ width: 'fit-content'
420
+ }
421
+ }, {
422
+ children: bdConfig.map(function (_a) {
423
+ var title = _a.title,
424
+ subtitle = _a.subtitle,
425
+ details = _a.details;
426
+ return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
427
+ css: {
428
+ width: '200px'
429
+ },
430
+ className: 'bd-hover-container c-pointer'
431
+ }, {
432
+ children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
433
+ className: 'flex flex-row flex-middle',
434
+ style: {
435
+ columnGap: '8px'
436
+ }
437
+ }, {
438
+ children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
439
+ variant: 'HM2',
440
+ className: 'color-orange-on-hover'
441
+ }, {
442
+ children: title
443
+ })), jsxRuntime.jsx(AnimatedArrow, {})]
444
+ })), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
445
+ variant: 'B3',
446
+ className: 'mt-1',
447
+ css: {
448
+ opacity: 0.75
312
449
  }
313
- };
314
- updatePosition();
315
- window.addEventListener('resize', updatePosition);
316
- return function () { return window.removeEventListener('resize', updatePosition); };
317
- }, []);
318
- return (jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ ref: containerRef, className: 'bg-neutral-100 o-hidden', css: {
319
- top: '76px',
320
- position: 'fixed',
321
- left: "".concat(leftPosition, "px"),
322
- borderRadius: 24,
323
- boxShadow: '0px 8px 24px 0px rgba(26, 26, 26, 0.10)',
324
- width: 'fit-content',
325
- zIndex: 1002,
326
- opacity: 0,
327
- } }, { children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({ className: 'px-6 py-5', backgroundColor: '#FFF1EC' }, { children: jsxRuntime.jsx(ctDesignTypography.Typography, __assign({ variant: 'HM2', style: { lineHeight: '24px' } }, { children: BUSINESS_DROPDOWN_HEADING })) })), jsxRuntime.jsx(ctDesignContainer.Container, __assign({ className: 'flex flex-row p-6', css: { columnGap: '48px', width: 'fit-content' } }, { children: bdConfig.map(function (_a) {
328
- var title = _a.title, subtitle = _a.subtitle, details = _a.details;
329
- return (jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ css: { width: '200px' }, className: 'bd-hover-container' }, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ className: 'flex flex-row flex-middle', style: { columnGap: '8px' } }, { children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({ variant: 'HM2', className: 'color-orange-on-hover' }, { children: title })), jsxRuntime.jsx(AnimatedArrow, {})] })), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({ variant: 'B3', className: 'mt-1', css: { opacity: 0.75 } }, { children: subtitle })), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({ variant: 'P3', color: 'subheading', className: 'mt-3' }, { children: details }))] }), title));
330
- }) }))] })));
450
+ }, {
451
+ children: subtitle
452
+ })), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
453
+ variant: 'P3',
454
+ color: 'subheading',
455
+ className: 'mt-3'
456
+ }, {
457
+ children: details
458
+ }))]
459
+ }), title);
460
+ })
461
+ }))]
462
+ }));
331
463
  };
332
464
  var AnimatedArrow = function () {
333
- return (jsxRuntime.jsxs("div", __assign({ className: 'bd-arrow-container' }, { children: [jsxRuntime.jsx("div", __assign({ className: 'bd-arrow-wrapper' }, { children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {}) })), jsxRuntime.jsx("div", __assign({ className: 'bd-arrow-wrapper' }, { children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {}) })), jsxRuntime.jsx("div", __assign({ className: 'bd-arrow-wrapper' }, { children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {}) }))] })));
465
+ return jsxRuntime.jsxs("div", __assign({
466
+ className: 'bd-arrow-container'
467
+ }, {
468
+ children: [jsxRuntime.jsx("div", __assign({
469
+ className: 'bd-arrow-wrapper'
470
+ }, {
471
+ children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {})
472
+ })), jsxRuntime.jsx("div", __assign({
473
+ className: 'bd-arrow-wrapper'
474
+ }, {
475
+ children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {})
476
+ })), jsxRuntime.jsx("div", __assign({
477
+ className: 'bd-arrow-wrapper'
478
+ }, {
479
+ children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {})
480
+ }))]
481
+ }));
334
482
  };
335
483
 
336
- var ACCOUNT_OPTIONS_POPUP_CONFIG = [
337
- {
338
- text: 'My Profile',
339
- icon: jsxRuntime.jsx(ctDesignIcons.MyAccount, { width: 24, height: 24 }),
340
- redirectionLink: '/accounts/profile',
341
- },
342
- {
343
- text: 'My Trips',
344
- icon: jsxRuntime.jsx(ctDesignIcons.MyTrips, { width: 24, height: 24 }),
345
- redirectionLink: '/accounts/trips',
346
- },
347
- {
348
- text: 'Saved Cards',
349
- icon: jsxRuntime.jsx(ctDesignIcons.SavedCard, {}),
350
- redirectionLink: '/accounts/expressway',
351
- },
352
- {
353
- text: 'Saved Travellers',
354
- icon: jsxRuntime.jsx(ctDesignIcons.Travellers, { width: 24, height: 24 }),
355
- redirectionLink: '/account/travellers',
356
- },
357
- {
358
- text: 'Hi-Five',
359
- icon: jsxRuntime.jsx(ctDesignIcons.HiFive, {}),
360
- redirectionLink: '/accounts/hi-five?src=fh',
361
- },
362
- {
363
- text: 'Wallet',
364
- icon: jsxRuntime.jsx(ctDesignIcons.Wallet, { width: 24, height: 24 }),
365
- redirectionLink: '/accounts/wallet',
366
- },
367
- {
368
- text: 'Settings',
369
- icon: jsxRuntime.jsx(ctDesignIcons.SettingsCog, { width: 24, height: 24 }),
370
- redirectionLink: '/account/settings',
371
- },
372
- {
373
- text: 'Privacy Rights',
374
- icon: jsxRuntime.jsx(ctDesignIcons.PrivacyRights, {}),
375
- redirectionLink: 'accounts/personal-data-dashboard',
376
- },
377
- ];
484
+ var ACCOUNT_OPTIONS_POPUP_CONFIG = [{
485
+ text: 'My Profile',
486
+ icon: jsxRuntime.jsx(ctDesignIcons.MyAccount, {
487
+ width: 24,
488
+ height: 24
489
+ }),
490
+ redirectionLink: '/accounts/profile'
491
+ }, {
492
+ text: 'My Trips',
493
+ icon: jsxRuntime.jsx(ctDesignIcons.MyTrips, {
494
+ width: 24,
495
+ height: 24
496
+ }),
497
+ redirectionLink: '/accounts/trips'
498
+ }, {
499
+ text: 'Saved Cards',
500
+ icon: jsxRuntime.jsx(ctDesignIcons.SavedCard, {}),
501
+ redirectionLink: '/accounts/expressway'
502
+ }, {
503
+ text: 'Saved Travellers',
504
+ icon: jsxRuntime.jsx(ctDesignIcons.Travellers, {
505
+ width: 24,
506
+ height: 24
507
+ }),
508
+ redirectionLink: '/account/travellers'
509
+ }, {
510
+ text: 'Hi-Five',
511
+ icon: jsxRuntime.jsx(ctDesignIcons.HiFive, {}),
512
+ redirectionLink: '/accounts/hi-five?src=fh'
513
+ }, {
514
+ text: 'Wallet',
515
+ icon: jsxRuntime.jsx(ctDesignIcons.Wallet, {
516
+ width: 24,
517
+ height: 24
518
+ }),
519
+ redirectionLink: '/accounts/wallet'
520
+ }, {
521
+ text: 'Settings',
522
+ icon: jsxRuntime.jsx(ctDesignIcons.SettingsCog, {
523
+ width: 24,
524
+ height: 24
525
+ }),
526
+ redirectionLink: '/account/settings'
527
+ }, {
528
+ text: 'Privacy Rights',
529
+ icon: jsxRuntime.jsx(ctDesignIcons.PrivacyRights, {}),
530
+ redirectionLink: 'accounts/personal-data-dashboard'
531
+ }];
378
532
  var SIGN_OUT_TEXT = 'Logout';
379
533
  var LOGGEDIN_USER_TEXT = 'You are logged in with';
380
534
  var HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID = 'header-acc-btn';
@@ -382,173 +536,600 @@
382
536
  var ACCOUNT_OPTIONS_CONTAINER_WIDTH = 328;
383
537
 
384
538
  var LoyaltyChip = function (_a) {
385
- var icon = _a.icon, borderGradient = _a.borderGradient, backgroundGradient = _a.backgroundGradient, handleChipClick = _a.handleChipClick;
386
- var _b = react.useState(false), isHovered = _b[0], setIsHovered = _b[1];
387
- return (jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ className: 'flex p-relative flex-middle flex-center br-8 o-hidden c-pointer', style: {
388
- height: 32,
389
- paddingLeft: 8,
390
- transition: 'padding-right 0.2s ease-in-out',
391
- paddingRight: isHovered ? 4 : 8,
392
- }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onClick: handleChipClick }, { children: [jsxRuntime.jsx(ctDesignContainer.Container, { style: {
393
- content: '""',
394
- position: 'absolute',
395
- inset: 0,
396
- borderRadius: 'inherit',
397
- background: backgroundGradient,
398
- zIndex: -2,
399
- } }), jsxRuntime.jsx(ctDesignContainer.Container, { style: {
400
- content: '""',
401
- position: 'absolute',
402
- inset: 0,
403
- borderRadius: 'inherit',
404
- padding: '1px',
405
- background: borderGradient,
406
- WebkitMask: 'linear-gradient(white, white) content-box, linear-gradient(white, white)',
407
- WebkitMaskComposite: 'destination-out',
408
- maskComposite: 'exclude',
409
- zIndex: -1,
410
- } }), jsxRuntime.jsx(ctDesignContainer.Container, __assign({ className: 'flex flex-middle p-relative' }, { children: icon })), jsxRuntime.jsx(ctDesignContainer.Container, __assign({ className: 'flex flex-middle o-hidden', style: {
411
- maxWidth: isHovered ? 16 : 0,
412
- transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
413
- opacity: isHovered ? 0.5 : 0,
414
- } }, { children: jsxRuntime.jsx(ctDesignIcons.HeaderChevronRight, { color: 'white' }) }))] })));
539
+ var icon = _a.icon,
540
+ borderGradient = _a.borderGradient,
541
+ backgroundGradient = _a.backgroundGradient,
542
+ handleChipClick = _a.handleChipClick;
543
+ var _b = react.useState(false),
544
+ isHovered = _b[0],
545
+ setIsHovered = _b[1];
546
+ return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
547
+ className: 'flex p-relative flex-middle flex-center br-8 o-hidden c-pointer',
548
+ style: {
549
+ height: 32,
550
+ paddingLeft: 8,
551
+ transition: 'padding-right 0.2s ease-in-out',
552
+ paddingRight: isHovered ? 4 : 8
553
+ },
554
+ onMouseEnter: function () {
555
+ return setIsHovered(true);
556
+ },
557
+ onMouseLeave: function () {
558
+ return setIsHovered(false);
559
+ },
560
+ onClick: handleChipClick
561
+ }, {
562
+ children: [jsxRuntime.jsx(ctDesignContainer.Container, {
563
+ style: {
564
+ content: '""',
565
+ position: 'absolute',
566
+ inset: 0,
567
+ borderRadius: 'inherit',
568
+ background: backgroundGradient,
569
+ zIndex: -2
570
+ }
571
+ }), jsxRuntime.jsx(ctDesignContainer.Container, {
572
+ style: {
573
+ content: '""',
574
+ position: 'absolute',
575
+ inset: 0,
576
+ borderRadius: 'inherit',
577
+ padding: '1px',
578
+ background: borderGradient,
579
+ WebkitMask: 'linear-gradient(white, white) content-box, linear-gradient(white, white)',
580
+ WebkitMaskComposite: 'destination-out',
581
+ maskComposite: 'exclude',
582
+ zIndex: -1
583
+ }
584
+ }), jsxRuntime.jsx(ctDesignContainer.Container, __assign({
585
+ className: 'flex flex-middle p-relative'
586
+ }, {
587
+ children: icon
588
+ })), jsxRuntime.jsx(ctDesignContainer.Container, __assign({
589
+ className: 'flex flex-middle o-hidden',
590
+ style: {
591
+ maxWidth: isHovered ? 16 : 0,
592
+ transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
593
+ opacity: isHovered ? 0.5 : 0
594
+ }
595
+ }, {
596
+ children: jsxRuntime.jsx(ctDesignIcons.HeaderChevronRight, {
597
+ color: 'white'
598
+ })
599
+ }))]
600
+ }));
415
601
  };
416
602
 
417
603
  var _a;
418
604
  var LoyaltyType;
419
605
  (function (LoyaltyType) {
420
- LoyaltyType["FkVip"] = "FkVip";
421
- LoyaltyType["FkPremium"] = "FkPremium";
422
- LoyaltyType["InsiderIcon"] = "InsiderIcon";
423
- LoyaltyType["InsiderElite"] = "InsiderElite";
606
+ LoyaltyType["FkVip"] = "FkVip";
607
+ LoyaltyType["FkPremium"] = "FkPremium";
608
+ LoyaltyType["InsiderIcon"] = "InsiderIcon";
609
+ LoyaltyType["InsiderElite"] = "InsiderElite";
424
610
  })(LoyaltyType || (LoyaltyType = {}));
425
- var LOYALTY_DATA = (_a = {},
426
- _a[LoyaltyType.FkVip] = {
427
- icon: jsxRuntime.jsx(ctDesignIcons.FkVip, {}),
428
- borderGradient: 'linear-gradient(222.13deg, rgba(243, 179, 39, 0) 2.08%, #F3B327 85.17%)',
429
- backgroundGradient: 'linear-gradient(111deg, #360042 0%, #540061 100%)',
430
- },
431
- _a[LoyaltyType.FkPremium] = {
432
- icon: jsxRuntime.jsx(ctDesignIcons.FkPremium, {}),
433
- borderGradient: 'linear-gradient(230.68deg, rgba(243, 179, 39, 0) 10.1%, #F3B327 45.74%)',
434
- backgroundGradient: 'linear-gradient(180deg, #04176A 0%, #082395 100%)',
611
+ var LOYALTY_DATA = (_a = {}, _a[LoyaltyType.FkVip] = {
612
+ icon: jsxRuntime.jsx(ctDesignIcons.FkVip, {}),
613
+ borderGradient: 'linear-gradient(222.13deg, rgba(243, 179, 39, 0) 2.08%, #F3B327 85.17%)',
614
+ backgroundGradient: 'linear-gradient(111deg, #360042 0%, #540061 100%)'
615
+ }, _a[LoyaltyType.FkPremium] = {
616
+ icon: jsxRuntime.jsx(ctDesignIcons.FkPremium, {}),
617
+ borderGradient: 'linear-gradient(230.68deg, rgba(243, 179, 39, 0) 10.1%, #F3B327 45.74%)',
618
+ backgroundGradient: 'linear-gradient(180deg, #04176A 0%, #082395 100%)'
619
+ }, _a[LoyaltyType.InsiderIcon] = {
620
+ icon: jsxRuntime.jsx(ctDesignIcons.InsiderIcon, {}),
621
+ borderGradient: 'linear-gradient(230.68deg, rgba(208, 175, 101, 0) 10.1%, #D0AF65 45.74%)',
622
+ backgroundGradient: 'linear-gradient(111deg, #2E3042 0%, #1A1C23 100%)'
623
+ }, _a[LoyaltyType.InsiderElite] = {
624
+ icon: jsxRuntime.jsx(ctDesignIcons.InsiderElite, {}),
625
+ borderGradient: 'linear-gradient(230.68deg, rgba(208, 175, 101, 0) 10.1%, #D0AF65 45.74%)',
626
+ backgroundGradient: 'linear-gradient(111deg, #2E3042 0%, #1A1C23 100%)'
627
+ }, _a);
628
+
629
+ var ExpandableItem = function (_a) {
630
+ var icon = _a.icon,
631
+ handleChipClick = _a.handleChipClick,
632
+ value = _a.value;
633
+ var _b = react.useState(false),
634
+ isHovered = _b[0],
635
+ setIsHovered = _b[1];
636
+ return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
637
+ className: "flex flex-middle justify-center br-8 c-pointer",
638
+ style: {
639
+ height: 32,
640
+ paddingLeft: 8,
641
+ paddingRight: isHovered ? 4 : 8,
642
+ transition: 'padding-right 0.2s ease-in-out',
643
+ background: isHovered ? '#ffd7ca' : '#ffe6df'
435
644
  },
436
- _a[LoyaltyType.InsiderIcon] = {
437
- icon: jsxRuntime.jsx(ctDesignIcons.InsiderIcon, {}),
438
- borderGradient: 'linear-gradient(230.68deg, rgba(208, 175, 101, 0) 10.1%, #D0AF65 45.74%)',
439
- backgroundGradient: 'linear-gradient(111deg, #2E3042 0%, #1A1C23 100%)',
645
+ onMouseEnter: function () {
646
+ return setIsHovered(true);
440
647
  },
441
- _a[LoyaltyType.InsiderElite] = {
442
- icon: jsxRuntime.jsx(ctDesignIcons.InsiderElite, {}),
443
- borderGradient: 'linear-gradient(230.68deg, rgba(208, 175, 101, 0) 10.1%, #D0AF65 45.74%)',
444
- backgroundGradient: 'linear-gradient(111deg, #2E3042 0%, #1A1C23 100%)',
648
+ onMouseLeave: function () {
649
+ return setIsHovered(false);
445
650
  },
446
- _a);
447
-
448
- var ExpandableItem = function (_a) {
449
- var icon = _a.icon, handleChipClick = _a.handleChipClick, value = _a.value;
450
- var _b = react.useState(false), isHovered = _b[0], setIsHovered = _b[1];
451
- return (jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ className: "flex flex-middle justify-center br-8 c-pointer", style: {
452
- height: 32,
453
- paddingLeft: 8,
454
- paddingRight: isHovered ? 4 : 8,
455
- transition: 'padding-right 0.2s ease-in-out',
456
- background: isHovered ? '#ffd7ca' : '#ffe6df',
457
- }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onClick: handleChipClick }, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ className: 'flex flex-middle flex-gap-1' }, { children: [icon, value && (jsxRuntime.jsx(ctDesignTypography.Typography, __assign({ variant: 'B3', className: 'value-text', isClickable: true }, { children: value })))] })), jsxRuntime.jsx(ctDesignContainer.Container, __assign({ className: 'flex flex-middle o-hidden', style: {
458
- maxWidth: isHovered ? 16 : 0,
459
- transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
460
- opacity: isHovered ? 1 : 0,
461
- } }, { children: jsxRuntime.jsx(ctDesignIcons.HeaderChevronRight, {}) }))] })));
651
+ onClick: handleChipClick
652
+ }, {
653
+ children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
654
+ className: 'flex flex-middle flex-gap-1'
655
+ }, {
656
+ children: [icon, value && jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
657
+ variant: 'B3',
658
+ className: 'value-text',
659
+ isClickable: true
660
+ }, {
661
+ children: value
662
+ }))]
663
+ })), jsxRuntime.jsx(ctDesignContainer.Container, __assign({
664
+ className: 'flex flex-middle o-hidden',
665
+ style: {
666
+ maxWidth: isHovered ? 16 : 0,
667
+ transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
668
+ opacity: isHovered ? 1 : 0
669
+ }
670
+ }, {
671
+ children: jsxRuntime.jsx(ctDesignIcons.HeaderChevronRight, {})
672
+ }))]
673
+ }));
462
674
  };
463
675
  var RewardsSection = function (props) {
464
- var selectedLoyaltyType = props.loyaltyType, _a = props.fkSupercoinBurnBalance, superCoinBalance = _a === void 0 ? 0 : _a, _b = props.walletBalance, walletBalance = _b === void 0 ? 0 : _b, loyaltyLoading = props.loyaltyLoading, superCoinsLoading = props.superCoinsLoading, walletLoading = props.walletLoading, walletChipClick = props.walletChipClick, supercoinsChipClick = props.supercoinsChipClick, loyaltyChipClick = props.loyaltyChipClick;
465
- return (jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ className: 'flex p-4 pt-0 flex-start flex-gap-1', style: { alignSelf: 'stretch' } }, { children: [loyaltyLoading ? (jsxRuntime.jsx(ctDesignShimmer.Shimmer, { width: '50px', height: '32px', borderRadius: '8px' })) : (selectedLoyaltyType &&
466
- LOYALTY_DATA[selectedLoyaltyType] && (jsxRuntime.jsx(LoyaltyChip, { icon: LOYALTY_DATA[selectedLoyaltyType].icon, borderGradient: LOYALTY_DATA[selectedLoyaltyType].borderGradient, backgroundGradient: LOYALTY_DATA[selectedLoyaltyType].backgroundGradient, handleChipClick: loyaltyChipClick }))), superCoinsLoading ? (jsxRuntime.jsx(ctDesignShimmer.Shimmer, { width: '50px', height: '32px', borderRadius: '8px' })) : (jsxRuntime.jsx(ExpandableItem, { icon: jsxRuntime.jsx(ctDesignIcons.Supercoin, { width: 20, height: 20 }), value: superCoinBalance, handleChipClick: supercoinsChipClick })), walletLoading ? (jsxRuntime.jsx(ctDesignShimmer.Shimmer, { width: '50px', height: '32px', borderRadius: '8px' })) : (jsxRuntime.jsx(ExpandableItem, { icon: jsxRuntime.jsx(ctDesignIcons.Wallet, { width: 20, height: 20 }), value: walletBalance, handleChipClick: walletChipClick }))] })));
676
+ var selectedLoyaltyType = props.loyaltyType,
677
+ _a = props.fkSupercoinBurnBalance,
678
+ superCoinBalance = _a === void 0 ? 0 : _a,
679
+ _b = props.walletBalance,
680
+ walletBalance = _b === void 0 ? 0 : _b,
681
+ loyaltyLoading = props.loyaltyLoading,
682
+ superCoinsLoading = props.superCoinsLoading,
683
+ walletLoading = props.walletLoading,
684
+ walletChipClick = props.walletChipClick,
685
+ supercoinsChipClick = props.supercoinsChipClick,
686
+ loyaltyChipClick = props.loyaltyChipClick;
687
+ return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
688
+ className: 'flex p-4 pt-0 flex-start flex-gap-1',
689
+ style: {
690
+ alignSelf: 'stretch'
691
+ }
692
+ }, {
693
+ children: [loyaltyLoading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
694
+ width: '50px',
695
+ height: '32px',
696
+ borderRadius: '8px'
697
+ }) : selectedLoyaltyType && LOYALTY_DATA[selectedLoyaltyType] && jsxRuntime.jsx(LoyaltyChip, {
698
+ icon: LOYALTY_DATA[selectedLoyaltyType].icon,
699
+ borderGradient: LOYALTY_DATA[selectedLoyaltyType].borderGradient,
700
+ backgroundGradient: LOYALTY_DATA[selectedLoyaltyType].backgroundGradient,
701
+ handleChipClick: loyaltyChipClick
702
+ }), superCoinsLoading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
703
+ width: '50px',
704
+ height: '32px',
705
+ borderRadius: '8px'
706
+ }) : jsxRuntime.jsx(ExpandableItem, {
707
+ icon: jsxRuntime.jsx(ctDesignIcons.Supercoin, {
708
+ width: 20,
709
+ height: 20
710
+ }),
711
+ value: superCoinBalance,
712
+ handleChipClick: supercoinsChipClick
713
+ }), walletLoading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
714
+ width: '50px',
715
+ height: '32px',
716
+ borderRadius: '8px'
717
+ }) : jsxRuntime.jsx(ExpandableItem, {
718
+ icon: jsxRuntime.jsx(ctDesignIcons.Wallet, {
719
+ width: 20,
720
+ height: 20
721
+ }),
722
+ value: walletBalance,
723
+ handleChipClick: walletChipClick
724
+ })]
725
+ }));
467
726
  };
468
727
 
728
+ var HoverableContainer = /*#__PURE__*/styled__default.default(ctDesignContainer.Container).withConfig({
729
+ displayName: "StyledHeader__HoverableContainer",
730
+ componentId: "sc-aht4pl-0"
731
+ })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 8px;\n border-radius: 8px;\n cursor: pointer;\n transition: background-color 0.2s ease-in-out;\n\n &:hover {\n background-color: #ecf3ff;\n color: green;\n }\n"], ["\n padding: 8px;\n border-radius: 8px;\n cursor: pointer;\n transition: background-color 0.2s ease-in-out;\n\n &:hover {\n background-color: #ecf3ff;\n color: green;\n }\n"])));
732
+ var LogoutButton = /*#__PURE__*/styled__default.default(ctDesignContainer.Container).withConfig({
733
+ displayName: "StyledHeader__LogoutButton",
734
+ componentId: "sc-aht4pl-1"
735
+ })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 8px;\n border-radius: 8px;\n cursor: pointer;\n display: flex;\n column-gap: 8px;\n transition: background-color 0.2s ease-in-out;\n\n &:hover {\n background-color: #fbefef;\n }\n"], ["\n padding: 8px;\n border-radius: 8px;\n cursor: pointer;\n display: flex;\n column-gap: 8px;\n transition: background-color 0.2s ease-in-out;\n\n &:hover {\n background-color: #fbefef;\n }\n"])));
736
+ var templateObject_1, templateObject_2;
737
+
469
738
  var AccountDropdownContent = function (props) {
470
- var _a = props || {}, handleLogout = _a.handleLogout, userName = _a.userName, userMobileNumber = _a.userMobileNumber, countryCode = _a.countryCode, userDetailsLoading = _a.userDetailsLoading, superCoinBalance = _a.fkSupercoinBurnBalance, walletBalance = _a.walletBalance, loyaltyType = _a.loyaltyType, loyaltyLoading = _a.loyaltyLoading, walletLoading = _a.walletLoading, superCoinsLoading = _a.superCoinsLoading, walletChipClick = _a.walletChipClick, supercoinsChipClick = _a.supercoinsChipClick, loyaltyChipClick = _a.loyaltyChipClick;
471
- var containerRef = useDropdownAnimation().containerRef;
472
- var _b = react.useMemo(function () {
473
- var userGreeting = userName && "Hello ".concat(userName, "!");
474
- var phoneNumber = countryCode && userMobileNumber ? "".concat(countryCode, " ").concat(userMobileNumber) : '';
475
- return { userGreeting: userGreeting, phoneNumber: phoneNumber };
476
- }, [userName, userMobileNumber, countryCode]), userGreeting = _b.userGreeting, phoneNumber = _b.phoneNumber;
477
- var handleRedirectClick = function (redirectLink) {
478
- return function () {
479
- window.location.href = redirectLink;
480
- };
739
+ var _a = props || {},
740
+ handleLogout = _a.handleLogout,
741
+ userName = _a.userName,
742
+ userMobileNumber = _a.userMobileNumber,
743
+ countryCode = _a.countryCode,
744
+ userDetailsLoading = _a.userDetailsLoading,
745
+ superCoinBalance = _a.fkSupercoinBurnBalance,
746
+ walletBalance = _a.walletBalance,
747
+ loyaltyType = _a.loyaltyType,
748
+ loyaltyLoading = _a.loyaltyLoading,
749
+ walletLoading = _a.walletLoading,
750
+ superCoinsLoading = _a.superCoinsLoading,
751
+ walletChipClick = _a.walletChipClick,
752
+ supercoinsChipClick = _a.supercoinsChipClick,
753
+ loyaltyChipClick = _a.loyaltyChipClick,
754
+ isOpen = _a.isOpen;
755
+ var containerRef = useDropdownAnimation(isOpen).containerRef;
756
+ var _b = react.useMemo(function () {
757
+ var userGreeting = userName && "Hello ".concat(userName, "!");
758
+ var phoneNumber = countryCode && userMobileNumber ? "".concat(countryCode, " ").concat(userMobileNumber) : '';
759
+ return {
760
+ userGreeting: userGreeting,
761
+ phoneNumber: phoneNumber
762
+ };
763
+ }, [userName, userMobileNumber, countryCode]),
764
+ userGreeting = _b.userGreeting,
765
+ phoneNumber = _b.phoneNumber;
766
+ var handleRedirectClick = function (redirectLink) {
767
+ return function () {
768
+ window.location.href = redirectLink;
481
769
  };
482
- react.useEffect(function () {
483
- var headerAccBtn = document.getElementById(HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID);
484
- var accountOptionsElem = document.getElementById(ACCOUNT_OPTIONS_CONTAINER_ID);
485
- var positionAccountOptionsDiv = function () {
486
- var headerBtnRight = headerAccBtn === null || headerAccBtn === void 0 ? void 0 : headerAccBtn.getBoundingClientRect().right;
487
- if (accountOptionsElem && headerBtnRight) {
488
- accountOptionsElem.style.left = "".concat(headerBtnRight - ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px");
489
- }
490
- };
491
- positionAccountOptionsDiv();
492
- }, []);
493
- var renderUserData = function () {
494
- var renderContent = function (loading, content, variant, color) { return (jsxRuntime.jsx(ctDesignTypography.Typography, __assign({ variant: variant, color: color }, { children: loading ? (jsxRuntime.jsx(ctDesignShimmer.Shimmer, { height: variant === 'HM3' ? '18px' : '12px', width: variant === 'HM3' ? '140px' : '200px' })) : (content) }))); };
495
- return (jsxRuntime.jsx(ctDesignContainer.Container, __assign({ className: 'flex flex-column flex-gap-1' }, { 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')] })) })));
770
+ };
771
+ react.useEffect(function () {
772
+ var headerAccBtn = document.getElementById(HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID);
773
+ var accountOptionsElem = document.getElementById(ACCOUNT_OPTIONS_CONTAINER_ID);
774
+ var positionAccountOptionsDiv = function () {
775
+ var headerBtnRight = headerAccBtn === null || headerAccBtn === void 0 ? void 0 : headerAccBtn.getBoundingClientRect().right;
776
+ if (accountOptionsElem && headerBtnRight) {
777
+ accountOptionsElem.style.left = "".concat(headerBtnRight - ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px");
778
+ }
779
+ };
780
+ positionAccountOptionsDiv();
781
+ }, []);
782
+ var renderUserData = function () {
783
+ var renderContent = function (loading, content, variant, color) {
784
+ return jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
785
+ variant: variant,
786
+ color: color
787
+ }, {
788
+ children: loading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
789
+ height: variant === 'HM3' ? '18px' : '12px',
790
+ width: variant === 'HM3' ? '140px' : '200px'
791
+ }) : content
792
+ }));
496
793
  };
497
- return (jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ id: ACCOUNT_OPTIONS_CONTAINER_ID, ref: containerRef, className: 'flex flex-column br-16 o-hidden', css: { zIndex: 1002, opacity: 0, top: '76px', position: 'fixed' }, width: "".concat(ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px"), background: '#FFF1EC' }, { children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({ className: 'p-4', height: '72px' }, { children: renderUserData() })), jsxRuntime.jsx(RewardsSection, { fkSupercoinBurnBalance: superCoinBalance, walletBalance: walletBalance, loyaltyType: loyaltyType, loyaltyLoading: loyaltyLoading, superCoinsLoading: superCoinsLoading, walletLoading: walletLoading, walletChipClick: walletChipClick, supercoinsChipClick: supercoinsChipClick, loyaltyChipClick: loyaltyChipClick }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ className: 'p-2 flex flex-column', backgroundColor: 'white', style: {
498
- borderBottomLeftRadius: 12,
499
- borderBottomRightRadius: 12,
500
- rowGap: 8,
501
- } }, { children: [ACCOUNT_OPTIONS_POPUP_CONFIG.map(function (_a) {
502
- var text = _a.text, icon = _a.icon, redirectionLink = _a.redirectionLink;
503
- return (jsxRuntime.jsx(ctDesignContainer.Container, __assign({ className: "highlight-on-hover default p-2 br-8 c-pointer" }, { children: jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ className: 'flex c-pointer', css: { columnGap: '8px' }, onClick: handleRedirectClick(redirectionLink) }, { children: [icon, jsxRuntime.jsx(ctDesignTypography.Typography, __assign({ variant: 'P1', className: 'flex flex-middle c-pointer' }, { children: text }))] }), "account-option-".concat(text)) }), "account-option-".concat(text)));
504
- }), jsxRuntime.jsx(ctDesignDivider.Divider, { style: {
505
- borderBottom: '1px dashed #E6E6E6',
506
- } }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ className: "logout-button-hover default flex p-2 br-8 c-pointer", css: { columnGap: '8px' }, onClick: handleLogout }, { children: [jsxRuntime.jsx(ctDesignIcons.Signout, { height: 24, width: 24 }), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({ variant: 'P1', className: 'flex flex-middle c-pointer', color: 'warning' }, { children: SIGN_OUT_TEXT }))] }))] }))] })));
794
+ return jsxRuntime.jsx(ctDesignContainer.Container, __assign({
795
+ className: 'flex flex-column flex-gap-1'
796
+ }, {
797
+ children: userGreeting ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
798
+ children: [renderContent(userDetailsLoading, userGreeting, 'HM3', 'primary'), renderContent(userDetailsLoading, "".concat(LOGGEDIN_USER_TEXT, " ").concat(phoneNumber), 'P3', 'subheading')]
799
+ }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
800
+ children: [renderContent(userDetailsLoading, LOGGEDIN_USER_TEXT, 'P3', 'subheading'), renderContent(userDetailsLoading, phoneNumber, 'HM3', 'primary')]
801
+ })
802
+ }));
803
+ };
804
+ return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
805
+ id: ACCOUNT_OPTIONS_CONTAINER_ID,
806
+ ref: containerRef,
807
+ className: 'flex flex-column br-16 o-hidden',
808
+ css: {
809
+ zIndex: 1002,
810
+ opacity: 0,
811
+ top: '76px',
812
+ position: 'fixed'
813
+ },
814
+ width: "".concat(ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px"),
815
+ background: '#FFF1EC'
816
+ }, {
817
+ children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({
818
+ className: 'p-4',
819
+ height: '72px'
820
+ }, {
821
+ children: renderUserData()
822
+ })), jsxRuntime.jsx(RewardsSection, {
823
+ fkSupercoinBurnBalance: superCoinBalance,
824
+ walletBalance: walletBalance,
825
+ loyaltyType: loyaltyType,
826
+ loyaltyLoading: loyaltyLoading,
827
+ superCoinsLoading: superCoinsLoading,
828
+ walletLoading: walletLoading,
829
+ walletChipClick: walletChipClick,
830
+ supercoinsChipClick: supercoinsChipClick,
831
+ loyaltyChipClick: loyaltyChipClick
832
+ }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
833
+ className: 'p-2 flex flex-column',
834
+ backgroundColor: 'white',
835
+ style: {
836
+ borderBottomLeftRadius: 12,
837
+ borderBottomRightRadius: 12,
838
+ rowGap: 8
839
+ }
840
+ }, {
841
+ children: [ACCOUNT_OPTIONS_POPUP_CONFIG.map(function (_a) {
842
+ var text = _a.text,
843
+ icon = _a.icon,
844
+ redirectionLink = _a.redirectionLink;
845
+ return jsxRuntime.jsx(HoverableContainer, __assign({
846
+ onClick: handleRedirectClick(redirectionLink)
847
+ }, {
848
+ children: jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
849
+ className: 'flex c-pointer',
850
+ style: {
851
+ columnGap: '8px'
852
+ }
853
+ }, {
854
+ children: [icon, jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
855
+ variant: 'P1',
856
+ className: 'flex flex-middle c-pointer'
857
+ }, {
858
+ children: text
859
+ }))]
860
+ }))
861
+ }), "account-option-".concat(text));
862
+ }), jsxRuntime.jsx(ctDesignDivider.Divider, {
863
+ style: {
864
+ borderBottom: '1px dashed #E6E6E6'
865
+ }
866
+ }), jsxRuntime.jsxs(LogoutButton, __assign({
867
+ onClick: handleLogout
868
+ }, {
869
+ children: [jsxRuntime.jsx(ctDesignIcons.Signout, {
870
+ height: 24,
871
+ width: 24
872
+ }), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
873
+ variant: 'P1',
874
+ className: 'flex flex-middle c-pointer',
875
+ color: 'warning'
876
+ }, {
877
+ children: SIGN_OUT_TEXT
878
+ }))]
879
+ }))]
880
+ }))]
881
+ }));
507
882
  };
508
883
 
509
884
  var UserAccount = function (props) {
510
- var handleLogout = props.handleLogout, userDetailsLoading = props.userDetailsLoading, userName = props.userName, userMobileNumber = props.userMobileNumber, countryCode = props.countryCode, fkSupercoinBurnBalance = props.fkSupercoinBurnBalance, walletBalance = props.walletBalance, loyaltyType = props.loyaltyType, walletLoading = props.walletLoading, superCoinsLoading = props.superCoinsLoading, loyaltyLoading = props.loyaltyLoading, loyaltyChipClick = props.loyaltyChipClick, supercoinsChipClick = props.supercoinsChipClick, walletChipClick = props.walletChipClick;
511
- var _a = useHoverDropdown({ openDelay: 500, closeDelay: 50 }), isDropdownVisible = _a.isDropdownVisible, handleOnMouseEnter = _a.handleOnMouseEnter, handleOnMouseLeave = _a.handleOnMouseLeave, handleDropdownMouseEnter = _a.handleDropdownMouseEnter, handleDropdownMouseLeave = _a.handleDropdownMouseLeave;
512
- return (jsxRuntime.jsxs(ctDesignContainer.Container, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ className: "flex px-3 py-2 flex-middle br-12 h-100p c-pointer", style: { columnGap: 8 }, onMouseEnter: function () { return handleOnMouseEnter(4); }, onMouseLeave: handleOnMouseLeave, id: HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID }, { children: [jsxRuntime.jsx(ctDesignIcons.MyAccount, { color: isDropdownVisible ? '#FF4F17' : '#1A1A1A' }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ className: 'flex flex-row flex-middle' }, { children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({ variant: 'B2', className: 'c-pointer', color: isDropdownVisible ? 'secondary' : 'primary' }, { children: "My Account" })), jsxRuntime.jsx(ctDesignIcons.ChevronDown, { width: 20, height: 20, fill: isDropdownVisible ? '#FF4F17' : '#1A1A1A' })] }))] })), jsxRuntime.jsx(HeaderAnimatedMask, __assign({ show: isDropdownVisible, marginTop: '64px', handleDropdownMouseEnter: handleDropdownMouseEnter, handleDropdownMouseLeave: handleDropdownMouseLeave, onMaskClick: handleDropdownMouseLeave }, { children: jsxRuntime.jsx(AccountDropdownContent, { handleLogout: handleLogout, userDetailsLoading: userDetailsLoading, userName: userName, userMobileNumber: userMobileNumber, countryCode: countryCode, loyaltyType: loyaltyType, walletBalance: walletBalance, fkSupercoinBurnBalance: fkSupercoinBurnBalance, walletLoading: walletLoading, superCoinsLoading: superCoinsLoading, loyaltyLoading: loyaltyLoading, loyaltyChipClick: loyaltyChipClick, walletChipClick: walletChipClick, supercoinsChipClick: supercoinsChipClick }) }))] }));
885
+ var handleLogout = props.handleLogout,
886
+ userDetailsLoading = props.userDetailsLoading,
887
+ userName = props.userName,
888
+ userMobileNumber = props.userMobileNumber,
889
+ countryCode = props.countryCode,
890
+ fkSupercoinBurnBalance = props.fkSupercoinBurnBalance,
891
+ walletBalance = props.walletBalance,
892
+ loyaltyType = props.loyaltyType,
893
+ walletLoading = props.walletLoading,
894
+ superCoinsLoading = props.superCoinsLoading,
895
+ loyaltyLoading = props.loyaltyLoading,
896
+ loyaltyChipClick = props.loyaltyChipClick,
897
+ supercoinsChipClick = props.supercoinsChipClick,
898
+ walletChipClick = props.walletChipClick;
899
+ var _a = useHoverDropdown({
900
+ openDelay: 500,
901
+ closeDelay: 50
902
+ }),
903
+ isDropdownVisible = _a.isDropdownVisible,
904
+ handleOnMouseEnter = _a.handleOnMouseEnter,
905
+ handleOnMouseLeave = _a.handleOnMouseLeave,
906
+ handleDropdownMouseEnter = _a.handleDropdownMouseEnter,
907
+ handleDropdownMouseLeave = _a.handleDropdownMouseLeave;
908
+ return jsxRuntime.jsxs(ctDesignContainer.Container, {
909
+ children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
910
+ className: "flex px-3 py-2 flex-middle br-12 h-100p c-pointer",
911
+ style: {
912
+ columnGap: 8,
913
+ height: 64
914
+ },
915
+ onMouseEnter: function () {
916
+ return handleOnMouseEnter(4);
917
+ },
918
+ onMouseLeave: handleOnMouseLeave,
919
+ id: HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID
920
+ }, {
921
+ children: [jsxRuntime.jsx(ctDesignIcons.MyAccount, {
922
+ color: isDropdownVisible ? '#FF4F17' : '#1A1A1A'
923
+ }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
924
+ className: 'flex flex-row flex-middle'
925
+ }, {
926
+ children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
927
+ variant: 'B2',
928
+ className: 'c-pointer',
929
+ color: isDropdownVisible ? 'secondary' : 'primary'
930
+ }, {
931
+ children: "My Account"
932
+ })), jsxRuntime.jsx(ctDesignIcons.ChevronDown, {
933
+ width: 20,
934
+ height: 20,
935
+ fill: isDropdownVisible ? '#FF4F17' : '#1A1A1A'
936
+ })]
937
+ }))]
938
+ })), jsxRuntime.jsx(HeaderAnimatedMask, __assign({
939
+ show: isDropdownVisible,
940
+ marginTop: '64px',
941
+ handleDropdownMouseEnter: handleDropdownMouseEnter,
942
+ handleDropdownMouseLeave: handleDropdownMouseLeave,
943
+ onMaskClick: handleDropdownMouseLeave
944
+ }, {
945
+ children: jsxRuntime.jsx(AccountDropdownContent, {
946
+ handleLogout: handleLogout,
947
+ userDetailsLoading: userDetailsLoading,
948
+ userName: userName,
949
+ userMobileNumber: userMobileNumber,
950
+ countryCode: countryCode,
951
+ loyaltyType: loyaltyType,
952
+ walletBalance: walletBalance,
953
+ fkSupercoinBurnBalance: fkSupercoinBurnBalance,
954
+ walletLoading: walletLoading,
955
+ superCoinsLoading: superCoinsLoading,
956
+ loyaltyLoading: loyaltyLoading,
957
+ loyaltyChipClick: loyaltyChipClick,
958
+ walletChipClick: walletChipClick,
959
+ supercoinsChipClick: supercoinsChipClick,
960
+ isOpen: isDropdownVisible
961
+ })
962
+ }))]
963
+ });
513
964
  };
514
965
 
515
966
  var Header = function (props) {
516
- var superCoinsLoading = props.superCoinsLoading, fkSupercoinBurnBalance = props.fkSupercoinBurnBalance, onLoginButtonClick = props.onLoginButtonClick, _a = props.showAllLobs, showAllLobs = _a === void 0 ? false : _a, selectedLOB = props.selectedLOB, isUserLoggedIn = props.isUserLoggedIn, handleLogoutClick = props.handleLogoutClick, walletBalance = props.walletBalance, walletLoading = props.walletLoading, loyaltyLoading = props.loyaltyLoading, loyaltyType = props.loyaltyType, userDetailsLoading = props.userDetailsLoading, userName = props.userName, userMobileNumber = props.userMobileNumber, countryCode = props.countryCode, loyaltyChipClick = props.loyaltyChipClick, supercoinsChipClick = props.supercoinsChipClick, walletChipClick = props.walletChipClick; props.ravenPayload; props.ravenPushCallback;
517
- var _c = useHoverDropdown({
518
- openDelay: 500,
519
- }), isDropdownVisible = _c.isDropdownVisible, hoveredElemIndex = _c.hoveredElemIndex, handleOnMouseEnter = _c.handleOnMouseEnter, handleOnMouseLeave = _c.handleOnMouseLeave, handleDropdownMouseEnter = _c.handleDropdownMouseEnter, handleDropdownMouseLeave = _c.handleDropdownMouseLeave;
520
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({ className: 'flex t-0 p-sticky w-100p flex-middle flex-center flex-gap-6 flex-no-shrink', style: {
521
- zIndex: 1000,
522
- height: 64,
523
- borderBottom: '1px solid #E6E6E6',
524
- background: '#F7FAFF',
525
- } }, { children: jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ className: 'flex flex-middle flex-between flex-gap-6', style: {
526
- maxWidth: 1440,
527
- padding: '0px 28px',
528
- flex: '1 0 0',
529
- } }, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ className: 'flex flex-row flex-center flex-middle' }, { children: [jsxRuntime.jsx(ctDesignIcons.CTLogo, {}), jsxRuntime.jsx(ctDesignDivider.Divider, { style: {
530
- width: 12,
531
- marginLeft: 2,
532
- marginRight: 2,
533
- transform: 'rotate(90deg)',
534
- borderBottom: '1px solid #e0e0e0',
535
- } }), jsxRuntime.jsx(ctDesignIcons.Fkcompany, {})] })), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ className: 'flex flex-row flex-middle flex-center flex-cg-6' }, { children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({ className: 'flex flex-row flex-middle flex-center flex-cg-1' }, { children: NAVBAR_OPTIONS.map(function (option, index) {
536
- var isHovered = hoveredElemIndex === index;
537
- return (jsxRuntime.jsxs(ctDesignContainer.Container, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ onMouseEnter: function () { return handleOnMouseEnter(index); }, onMouseLeave: handleOnMouseLeave, className: 'flex flex-row flex-middle px-3 py-2 c-pointer p-relative', style: { columnGap: 8, height: 64 }, onClick: function () {
538
- if (option.isClickable) {
539
- window.location.href = option.link;
540
- }
541
- } }, { children: [jsxRuntime.jsx(option.lefticon, { color: isHovered ? '#FF4F17' : '#1A1A1A' }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ className: 'flex flex-row flex-middle' }, { children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({ variant: 'B2', color: isHovered ? 'secondary' : 'primary', isClickable: true }, { children: option.text })), option.rightIcon && (jsxRuntime.jsx(option.rightIcon, { width: 20, height: 20, fill: isHovered ? '#FF4F17' : '#1A1A1A' }))] }))] }), "nav-option-".concat(index)), jsxRuntime.jsx(HeaderAnimatedMask, __assign({ show: hoveredElemIndex === index && option.isHoverable && isDropdownVisible, marginTop: '64px', handleDropdownMouseEnter: handleDropdownMouseEnter, handleDropdownMouseLeave: handleDropdownMouseLeave, onMaskClick: handleDropdownMouseLeave }, { children: jsxRuntime.jsx(BusinessDropdownContent, {}) }))] }));
542
- }) })), isUserLoggedIn && (jsxRuntime.jsx(ctDesignDivider.Divider, { style: {
543
- width: 12,
544
- margin: '0 -18px',
545
- transform: 'rotate(90deg)',
546
- borderBottom: '1px solid #e0e0e0',
547
- } })), jsxRuntime.jsx(ctDesignContainer.Container, { children: isUserLoggedIn ? (jsxRuntime.jsx(ctDesignContainer.Container, __assign({ className: 'flex flex-row flex-middle' }, { children: jsxRuntime.jsx(UserAccount, { handleLogout: handleLogoutClick, superCoinsLoading: superCoinsLoading, fkSupercoinBurnBalance: fkSupercoinBurnBalance, walletBalance: walletBalance, walletLoading: walletLoading, loyaltyLoading: loyaltyLoading, loyaltyType: loyaltyType, userDetailsLoading: userDetailsLoading, userName: userName, userMobileNumber: userMobileNumber, countryCode: countryCode, walletChipClick: walletChipClick, supercoinsChipClick: supercoinsChipClick, loyaltyChipClick: loyaltyChipClick }) }))) : (jsxRuntime.jsx(ctDesignButton.Button, __assign({ className: "fw-400 fs-14 login-button", onClick: onLoginButtonClick, style: {
548
- width: 153,
549
- height: 40,
550
- border: '1px solid #1A1A1A',
551
- }, loading: false }, { children: jsxRuntime.jsx(ctDesignTypography.Typography, __assign({ componentNode: 'span', variant: 'L2' }, { children: "Login" })) }))) })] }))] })) })), showAllLobs && jsxRuntime.jsx(LobsHeader, { selectedLOB: selectedLOB })] }));
967
+ var superCoinsLoading = props.superCoinsLoading,
968
+ fkSupercoinBurnBalance = props.fkSupercoinBurnBalance,
969
+ onLoginButtonClick = props.onLoginButtonClick,
970
+ _a = props.showAllLobs,
971
+ showAllLobs = _a === void 0 ? false : _a,
972
+ selectedLOB = props.selectedLOB,
973
+ isUserLoggedIn = props.isUserLoggedIn,
974
+ handleLogoutClick = props.handleLogoutClick,
975
+ walletBalance = props.walletBalance,
976
+ walletLoading = props.walletLoading,
977
+ loyaltyLoading = props.loyaltyLoading,
978
+ loyaltyType = props.loyaltyType,
979
+ userDetailsLoading = props.userDetailsLoading,
980
+ userName = props.userName,
981
+ userMobileNumber = props.userMobileNumber,
982
+ countryCode = props.countryCode,
983
+ loyaltyChipClick = props.loyaltyChipClick,
984
+ supercoinsChipClick = props.supercoinsChipClick,
985
+ walletChipClick = props.walletChipClick;
986
+ props.ravenPayload;
987
+ props.ravenPushCallback;
988
+ var _c = useHoverDropdown({
989
+ openDelay: 500
990
+ }),
991
+ isDropdownVisible = _c.isDropdownVisible,
992
+ hoveredElemIndex = _c.hoveredElemIndex,
993
+ handleOnMouseEnter = _c.handleOnMouseEnter,
994
+ handleOnMouseLeave = _c.handleOnMouseLeave,
995
+ handleDropdownMouseEnter = _c.handleDropdownMouseEnter,
996
+ handleDropdownMouseLeave = _c.handleDropdownMouseLeave;
997
+ return jsxRuntime.jsxs(jsxRuntime.Fragment, {
998
+ children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({
999
+ className: 'flex t-0 p-sticky w-100p flex-middle flex-center flex-gap-6 flex-no-shrink',
1000
+ style: {
1001
+ zIndex: 1000,
1002
+ height: 64,
1003
+ borderBottom: '1px solid #E6E6E6',
1004
+ background: '#F7FAFF'
1005
+ }
1006
+ }, {
1007
+ children: jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
1008
+ className: 'flex flex-middle flex-between flex-gap-6',
1009
+ style: {
1010
+ maxWidth: 1440,
1011
+ padding: '0px 28px',
1012
+ flex: '1 0 0'
1013
+ }
1014
+ }, {
1015
+ children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
1016
+ className: 'flex flex-row flex-center flex-middle'
1017
+ }, {
1018
+ children: [jsxRuntime.jsx(ctDesignIcons.CTLogo, {}), jsxRuntime.jsx(ctDesignDivider.Divider, {
1019
+ style: {
1020
+ width: 12,
1021
+ marginLeft: 2,
1022
+ marginRight: 2,
1023
+ transform: 'rotate(90deg)',
1024
+ borderBottom: '1px solid #e0e0e0'
1025
+ }
1026
+ }), jsxRuntime.jsx(ctDesignIcons.Fkcompany, {})]
1027
+ })), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
1028
+ className: 'flex flex-row flex-middle flex-center flex-cg-6'
1029
+ }, {
1030
+ children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({
1031
+ className: 'flex flex-row flex-middle flex-center flex-cg-1'
1032
+ }, {
1033
+ children: NAVBAR_OPTIONS.map(function (option, index) {
1034
+ var isHovered = hoveredElemIndex === index;
1035
+ return jsxRuntime.jsxs(ctDesignContainer.Container, {
1036
+ children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
1037
+ onMouseEnter: function () {
1038
+ return handleOnMouseEnter(index);
1039
+ },
1040
+ onMouseLeave: handleOnMouseLeave,
1041
+ className: 'flex flex-row flex-middle px-3 py-2 c-pointer p-relative',
1042
+ style: {
1043
+ columnGap: 8,
1044
+ height: 64
1045
+ },
1046
+ onClick: function () {
1047
+ if (option.isClickable) {
1048
+ window.location.href = option.link;
1049
+ }
1050
+ }
1051
+ }, {
1052
+ children: [jsxRuntime.jsx(option.lefticon, {
1053
+ color: isHovered ? '#FF4F17' : '#1A1A1A'
1054
+ }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
1055
+ className: 'flex flex-row flex-middle'
1056
+ }, {
1057
+ children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
1058
+ variant: 'B2',
1059
+ color: isHovered ? 'secondary' : 'primary',
1060
+ isClickable: true
1061
+ }, {
1062
+ children: option.text
1063
+ })), option.rightIcon && jsxRuntime.jsx(option.rightIcon, {
1064
+ width: 20,
1065
+ height: 20,
1066
+ fill: isHovered ? '#FF4F17' : '#1A1A1A'
1067
+ })]
1068
+ }))]
1069
+ }), "nav-option-".concat(index)), jsxRuntime.jsx(HeaderAnimatedMask, __assign({
1070
+ show: hoveredElemIndex === index && option.isHoverable && isDropdownVisible,
1071
+ marginTop: '64px',
1072
+ handleDropdownMouseEnter: handleDropdownMouseEnter,
1073
+ handleDropdownMouseLeave: handleDropdownMouseLeave,
1074
+ onMaskClick: handleDropdownMouseLeave
1075
+ }, {
1076
+ children: jsxRuntime.jsx(BusinessDropdownContent, {
1077
+ isOpen: hoveredElemIndex === index && option.isHoverable && isDropdownVisible
1078
+ })
1079
+ }))]
1080
+ });
1081
+ })
1082
+ })), isUserLoggedIn && jsxRuntime.jsx(ctDesignDivider.Divider, {
1083
+ style: {
1084
+ width: 12,
1085
+ margin: '0 -18px',
1086
+ transform: 'rotate(90deg)',
1087
+ borderBottom: '1px solid #e0e0e0'
1088
+ }
1089
+ }), jsxRuntime.jsx(ctDesignContainer.Container, {
1090
+ children: isUserLoggedIn ? jsxRuntime.jsx(ctDesignContainer.Container, __assign({
1091
+ className: 'flex flex-row flex-middle'
1092
+ }, {
1093
+ children: jsxRuntime.jsx(UserAccount, {
1094
+ handleLogout: handleLogoutClick,
1095
+ superCoinsLoading: superCoinsLoading,
1096
+ fkSupercoinBurnBalance: fkSupercoinBurnBalance,
1097
+ walletBalance: walletBalance,
1098
+ walletLoading: walletLoading,
1099
+ loyaltyLoading: loyaltyLoading,
1100
+ loyaltyType: loyaltyType,
1101
+ userDetailsLoading: userDetailsLoading,
1102
+ userName: userName,
1103
+ userMobileNumber: userMobileNumber,
1104
+ countryCode: countryCode,
1105
+ walletChipClick: walletChipClick,
1106
+ supercoinsChipClick: supercoinsChipClick,
1107
+ loyaltyChipClick: loyaltyChipClick
1108
+ })
1109
+ })) : jsxRuntime.jsx(ctDesignButton.Button, __assign({
1110
+ className: "fw-400 fs-14 login-button",
1111
+ onClick: onLoginButtonClick,
1112
+ style: {
1113
+ width: 153,
1114
+ height: 40,
1115
+ border: '1px solid #1A1A1A'
1116
+ },
1117
+ loading: false
1118
+ }, {
1119
+ children: jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
1120
+ componentNode: 'span',
1121
+ variant: 'L2'
1122
+ }, {
1123
+ children: "Login"
1124
+ }))
1125
+ }))
1126
+ })]
1127
+ }))]
1128
+ }))
1129
+ })), showAllLobs && jsxRuntime.jsx(LobsHeader, {
1130
+ selectedLOB: selectedLOB
1131
+ })]
1132
+ });
552
1133
  };
553
1134
 
554
1135
  exports.Header = Header;