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