@cleartrip/ct-design-header 1.2.0-SNAPSHOT-header-test.0 → 1.2.0-SNAPSHOT-scss-test-v1.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 (24) hide show
  1. package/dist/LobsHeader/type.d.ts +8 -1
  2. package/dist/LobsHeader/type.d.ts.map +1 -1
  3. package/dist/RewardsSection/LoyaltyChips.d.ts +1 -1
  4. package/dist/RewardsSection/LoyaltyChips.d.ts.map +1 -1
  5. package/dist/RewardsSection/index.d.ts.map +1 -1
  6. package/dist/RewardsSection/loyaltyTypes.d.ts +0 -6
  7. package/dist/RewardsSection/loyaltyTypes.d.ts.map +1 -1
  8. package/dist/UserAccount/UserAccountDropdown.d.ts +0 -1
  9. package/dist/UserAccount/UserAccountDropdown.d.ts.map +1 -1
  10. package/dist/ct-design-header.browser.cjs.js +1 -1
  11. package/dist/ct-design-header.browser.cjs.js.map +1 -1
  12. package/dist/ct-design-header.browser.esm.js +1 -1
  13. package/dist/ct-design-header.browser.esm.js.map +1 -1
  14. package/dist/ct-design-header.cjs.js +1040 -471
  15. package/dist/ct-design-header.cjs.js.map +1 -1
  16. package/dist/ct-design-header.esm.js +1036 -471
  17. package/dist/ct-design-header.esm.js.map +1 -1
  18. package/dist/ct-design-header.umd.js +1053 -475
  19. package/dist/ct-design-header.umd.js.map +1 -1
  20. package/dist/index.css +1 -0
  21. package/dist/index.css.map +1 -0
  22. package/dist/type.d.ts +13 -6
  23. package/dist/type.d.ts.map +1 -1
  24. 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,362 +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
328
  var useDropdownAnimation = function (isOpen) {
282
- var containerRef = react.useRef(null);
283
- var openDropdown = function () {
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
- var closeDropdown = function () {
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 () {
298
351
  if (containerRef.current) {
299
- var fullHeight = containerRef.current.scrollHeight;
300
- containerRef.current.style.transition = 'max-height 0.3s ease-in-out, opacity 0.3s ease-in-out';
301
- containerRef.current.style.maxHeight = "".concat(fullHeight / 2, "px");
302
- containerRef.current.style.opacity = '0';
303
- setTimeout(function () {
304
- if (containerRef.current) {
305
- containerRef.current.style.maxHeight = '0px';
306
- }
307
- }, 300);
352
+ containerRef.current.style.maxHeight = '0px';
308
353
  }
309
- };
310
- react.useEffect(function () {
311
- if (isOpen) {
312
- openDropdown();
313
- }
314
- else {
315
- closeDropdown();
316
- }
317
- }, [isOpen]);
318
- return { containerRef: containerRef };
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
+ };
319
367
  };
320
368
 
321
369
  var BusinessDropdownContent = function (_a) {
322
- var isOpen = _a.isOpen;
323
- var _b = react.useState(0), leftPosition = _b[0], setLeftPosition = _b[1];
324
- var containerRef = useDropdownAnimation(isOpen).containerRef;
325
- react.useEffect(function () {
326
- var updatePosition = function () {
327
- if (containerRef.current) {
328
- var screenWidth = window.innerWidth;
329
- var containerWidth = containerRef.current.offsetWidth || 0;
330
- setLeftPosition((screenWidth - containerWidth) / 2);
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'
331
436
  }
332
- };
333
- updatePosition();
334
- window.addEventListener('resize', updatePosition);
335
- return function () { return window.removeEventListener('resize', updatePosition); };
336
- }, []);
337
- return (jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ ref: containerRef, className: 'bg-neutral-100 o-hidden', css: {
338
- top: '76px',
339
- position: 'fixed',
340
- left: "".concat(leftPosition, "px"),
341
- borderRadius: 24,
342
- boxShadow: '0px 8px 24px 0px rgba(26, 26, 26, 0.10)',
343
- width: 'fit-content',
344
- zIndex: 1002,
345
- opacity: 0,
346
- } }, { 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) {
347
- var title = _a.title, subtitle = _a.subtitle, details = _a.details;
348
- 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));
349
- }) }))] })));
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
449
+ }
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
+ }));
350
463
  };
351
464
  var AnimatedArrow = function () {
352
- 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
+ }));
353
482
  };
354
483
 
355
- var ACCOUNT_OPTIONS_POPUP_CONFIG = [
356
- {
357
- text: 'My Profile',
358
- icon: jsxRuntime.jsx(ctDesignIcons.MyAccount, { width: 24, height: 24 }),
359
- redirectionLink: '/accounts/profile',
360
- },
361
- {
362
- text: 'My Trips',
363
- icon: jsxRuntime.jsx(ctDesignIcons.MyTrips, { width: 24, height: 24 }),
364
- redirectionLink: '/accounts/trips',
365
- },
366
- {
367
- text: 'Saved Cards',
368
- icon: jsxRuntime.jsx(ctDesignIcons.SavedCard, {}),
369
- redirectionLink: '/accounts/expressway',
370
- },
371
- {
372
- text: 'Saved Travellers',
373
- icon: jsxRuntime.jsx(ctDesignIcons.Travellers, { width: 24, height: 24 }),
374
- redirectionLink: '/account/travellers',
375
- },
376
- {
377
- text: 'Hi-Five',
378
- icon: jsxRuntime.jsx(ctDesignIcons.HiFive, {}),
379
- redirectionLink: '/accounts/hi-five?src=fh',
380
- },
381
- {
382
- text: 'Wallet',
383
- icon: jsxRuntime.jsx(ctDesignIcons.Wallet, { width: 24, height: 24 }),
384
- redirectionLink: '/accounts/wallet',
385
- },
386
- {
387
- text: 'Settings',
388
- icon: jsxRuntime.jsx(ctDesignIcons.SettingsCog, { width: 24, height: 24 }),
389
- redirectionLink: '/account/settings',
390
- },
391
- {
392
- text: 'Privacy Rights',
393
- icon: jsxRuntime.jsx(ctDesignIcons.PrivacyRights, {}),
394
- redirectionLink: 'accounts/personal-data-dashboard',
395
- },
396
- ];
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
+ }];
397
532
  var SIGN_OUT_TEXT = 'Logout';
398
533
  var LOGGEDIN_USER_TEXT = 'You are logged in with';
399
534
  var HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID = 'header-acc-btn';
@@ -401,173 +536,616 @@
401
536
  var ACCOUNT_OPTIONS_CONTAINER_WIDTH = 328;
402
537
 
403
538
  var LoyaltyChip = function (_a) {
404
- var icon = _a.icon, borderGradient = _a.borderGradient, backgroundGradient = _a.backgroundGradient, handleChipClick = _a.handleChipClick;
405
- var _b = react.useState(false), isHovered = _b[0], setIsHovered = _b[1];
406
- return (jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ className: 'flex p-relative flex-middle flex-center br-8 o-hidden c-pointer', style: {
407
- height: 32,
408
- paddingLeft: 8,
409
- transition: 'padding-right 0.2s ease-in-out',
410
- paddingRight: isHovered ? 4 : 8,
411
- }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onClick: handleChipClick }, { children: [jsxRuntime.jsx(ctDesignContainer.Container, { style: {
412
- content: '""',
413
- position: 'absolute',
414
- inset: 0,
415
- borderRadius: 'inherit',
416
- background: backgroundGradient,
417
- zIndex: -2,
418
- } }), jsxRuntime.jsx(ctDesignContainer.Container, { style: {
419
- content: '""',
420
- position: 'absolute',
421
- inset: 0,
422
- borderRadius: 'inherit',
423
- padding: '1px',
424
- background: borderGradient,
425
- WebkitMask: 'linear-gradient(white, white) content-box, linear-gradient(white, white)',
426
- WebkitMaskComposite: 'destination-out',
427
- maskComposite: 'exclude',
428
- zIndex: -1,
429
- } }), 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: {
430
- maxWidth: isHovered ? 16 : 0,
431
- transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
432
- opacity: isHovered ? 0.5 : 0,
433
- } }, { 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
+ var handleClick = function () {
547
+ window.location.href = '/';
548
+ handleChipClick && handleChipClick();
549
+ };
550
+ return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
551
+ className: 'flex p-relative flex-middle flex-center br-8 o-hidden c-pointer',
552
+ style: {
553
+ height: 32,
554
+ paddingLeft: 8,
555
+ transition: 'padding-right 0.2s ease-in-out',
556
+ paddingRight: isHovered ? 4 : 8
557
+ },
558
+ onMouseEnter: function () {
559
+ return setIsHovered(true);
560
+ },
561
+ onMouseLeave: function () {
562
+ return setIsHovered(false);
563
+ },
564
+ onClick: handleClick
565
+ }, {
566
+ children: [jsxRuntime.jsx(ctDesignContainer.Container, {
567
+ style: {
568
+ content: '""',
569
+ position: 'absolute',
570
+ inset: 0,
571
+ borderRadius: 'inherit',
572
+ background: backgroundGradient,
573
+ zIndex: -2
574
+ }
575
+ }), jsxRuntime.jsx(ctDesignContainer.Container, {
576
+ style: {
577
+ content: '""',
578
+ position: 'absolute',
579
+ inset: 0,
580
+ borderRadius: 'inherit',
581
+ padding: '1px',
582
+ background: borderGradient,
583
+ WebkitMask: 'linear-gradient(white, white) content-box, linear-gradient(white, white)',
584
+ WebkitMaskComposite: 'destination-out',
585
+ maskComposite: 'exclude',
586
+ zIndex: -1
587
+ }
588
+ }), jsxRuntime.jsx(ctDesignContainer.Container, __assign({
589
+ className: 'flex flex-middle p-relative'
590
+ }, {
591
+ children: icon
592
+ })), jsxRuntime.jsx(ctDesignContainer.Container, __assign({
593
+ className: 'flex flex-middle o-hidden',
594
+ style: {
595
+ maxWidth: isHovered ? 16 : 0,
596
+ transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
597
+ opacity: isHovered ? 0.5 : 0
598
+ }
599
+ }, {
600
+ children: jsxRuntime.jsx(ctDesignIcons.HeaderChevronRight, {
601
+ color: 'white'
602
+ })
603
+ }))]
604
+ }));
434
605
  };
435
606
 
436
- var _a;
437
- var LoyaltyType;
607
+ exports.LoyaltyType = void 0;
438
608
  (function (LoyaltyType) {
439
- LoyaltyType["FkVip"] = "FkVip";
440
- LoyaltyType["FkPremium"] = "FkPremium";
441
- LoyaltyType["InsiderIcon"] = "InsiderIcon";
442
- LoyaltyType["InsiderElite"] = "InsiderElite";
443
- })(LoyaltyType || (LoyaltyType = {}));
444
- var LOYALTY_DATA = (_a = {},
445
- _a[LoyaltyType.FkVip] = {
446
- icon: jsxRuntime.jsx(ctDesignIcons.FkVip, {}),
447
- borderGradient: 'linear-gradient(222.13deg, rgba(243, 179, 39, 0) 2.08%, #F3B327 85.17%)',
448
- backgroundGradient: 'linear-gradient(111deg, #360042 0%, #540061 100%)',
449
- },
450
- _a[LoyaltyType.FkPremium] = {
451
- icon: jsxRuntime.jsx(ctDesignIcons.FkPremium, {}),
452
- borderGradient: 'linear-gradient(230.68deg, rgba(243, 179, 39, 0) 10.1%, #F3B327 45.74%)',
453
- backgroundGradient: 'linear-gradient(180deg, #04176A 0%, #082395 100%)',
609
+ LoyaltyType["FkVip"] = "FkVip";
610
+ LoyaltyType["FkPremium"] = "FkPremium";
611
+ LoyaltyType["InsiderIcon"] = "InsiderIcon";
612
+ LoyaltyType["InsiderElite"] = "InsiderElite";
613
+ })(exports.LoyaltyType || (exports.LoyaltyType = {}));
614
+
615
+ var _a;
616
+ var LOYALTY_DATA = (_a = {}, _a[exports.LoyaltyType.FkVip] = {
617
+ icon: jsxRuntime.jsx(ctDesignIcons.FkVip, {}),
618
+ borderGradient: 'linear-gradient(222.13deg, rgba(243, 179, 39, 0) 2.08%, #F3B327 85.17%)',
619
+ backgroundGradient: 'linear-gradient(111deg, #360042 0%, #540061 100%)'
620
+ }, _a[exports.LoyaltyType.FkPremium] = {
621
+ icon: jsxRuntime.jsx(ctDesignIcons.FkPremium, {}),
622
+ borderGradient: 'linear-gradient(230.68deg, rgba(243, 179, 39, 0) 10.1%, #F3B327 45.74%)',
623
+ backgroundGradient: 'linear-gradient(180deg, #04176A 0%, #082395 100%)'
624
+ }, _a[exports.LoyaltyType.InsiderIcon] = {
625
+ icon: jsxRuntime.jsx(ctDesignIcons.InsiderIcon, {}),
626
+ borderGradient: 'linear-gradient(230.68deg, rgba(208, 175, 101, 0) 10.1%, #D0AF65 45.74%)',
627
+ backgroundGradient: 'linear-gradient(111deg, #2E3042 0%, #1A1C23 100%)'
628
+ }, _a[exports.LoyaltyType.InsiderElite] = {
629
+ icon: jsxRuntime.jsx(ctDesignIcons.InsiderElite, {}),
630
+ borderGradient: 'linear-gradient(230.68deg, rgba(208, 175, 101, 0) 10.1%, #D0AF65 45.74%)',
631
+ backgroundGradient: 'linear-gradient(111deg, #2E3042 0%, #1A1C23 100%)'
632
+ }, _a);
633
+
634
+ var ExpandableItem = function (_a) {
635
+ var icon = _a.icon,
636
+ handleChipClick = _a.handleChipClick,
637
+ value = _a.value,
638
+ type = _a.type;
639
+ var _b = react.useState(false),
640
+ isHovered = _b[0],
641
+ setIsHovered = _b[1];
642
+ var handleDefaultClick = function () {
643
+ if (type === 'supercoins') {
644
+ window.location.href = '/supercoins';
645
+ } else if (type === 'wallet') {
646
+ window.location.href = '/wallet';
647
+ }
648
+ handleChipClick && handleChipClick();
649
+ };
650
+ return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
651
+ className: "flex flex-middle justify-center br-8 c-pointer",
652
+ style: {
653
+ height: 32,
654
+ paddingLeft: 8,
655
+ paddingRight: isHovered ? 4 : 8,
656
+ transition: 'padding-right 0.2s ease-in-out',
657
+ background: isHovered ? '#ffd7ca' : '#ffe6df'
454
658
  },
455
- _a[LoyaltyType.InsiderIcon] = {
456
- icon: jsxRuntime.jsx(ctDesignIcons.InsiderIcon, {}),
457
- borderGradient: 'linear-gradient(230.68deg, rgba(208, 175, 101, 0) 10.1%, #D0AF65 45.74%)',
458
- backgroundGradient: 'linear-gradient(111deg, #2E3042 0%, #1A1C23 100%)',
659
+ onMouseEnter: function () {
660
+ return setIsHovered(true);
459
661
  },
460
- _a[LoyaltyType.InsiderElite] = {
461
- icon: jsxRuntime.jsx(ctDesignIcons.InsiderElite, {}),
462
- borderGradient: 'linear-gradient(230.68deg, rgba(208, 175, 101, 0) 10.1%, #D0AF65 45.74%)',
463
- backgroundGradient: 'linear-gradient(111deg, #2E3042 0%, #1A1C23 100%)',
662
+ onMouseLeave: function () {
663
+ return setIsHovered(false);
464
664
  },
465
- _a);
466
-
467
- var ExpandableItem = function (_a) {
468
- var icon = _a.icon, handleChipClick = _a.handleChipClick, value = _a.value;
469
- var _b = react.useState(false), isHovered = _b[0], setIsHovered = _b[1];
470
- return (jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ className: "flex flex-middle justify-center br-8 c-pointer", style: {
471
- height: 32,
472
- paddingLeft: 8,
473
- paddingRight: isHovered ? 4 : 8,
474
- transition: 'padding-right 0.2s ease-in-out',
475
- background: isHovered ? '#ffd7ca' : '#ffe6df',
476
- }, 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: {
477
- maxWidth: isHovered ? 16 : 0,
478
- transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
479
- opacity: isHovered ? 1 : 0,
480
- } }, { children: jsxRuntime.jsx(ctDesignIcons.HeaderChevronRight, {}) }))] })));
665
+ onClick: handleDefaultClick
666
+ }, {
667
+ children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
668
+ className: 'flex flex-middle flex-gap-1'
669
+ }, {
670
+ children: [icon, value && jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
671
+ variant: 'B3',
672
+ className: 'value-text',
673
+ isClickable: true
674
+ }, {
675
+ children: value
676
+ }))]
677
+ })), jsxRuntime.jsx(ctDesignContainer.Container, __assign({
678
+ className: 'flex flex-middle o-hidden',
679
+ style: {
680
+ maxWidth: isHovered ? 16 : 0,
681
+ transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
682
+ opacity: isHovered ? 1 : 0
683
+ }
684
+ }, {
685
+ children: jsxRuntime.jsx(ctDesignIcons.HeaderChevronRight, {})
686
+ }))]
687
+ }));
481
688
  };
482
689
  var RewardsSection = function (props) {
483
- 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;
484
- 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 &&
485
- 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 }))] })));
690
+ var selectedLoyaltyType = props.loyaltyType,
691
+ _a = props.fkSupercoinBurnBalance,
692
+ superCoinBalance = _a === void 0 ? 0 : _a,
693
+ _b = props.walletBalance,
694
+ walletBalance = _b === void 0 ? 0 : _b,
695
+ loyaltyLoading = props.loyaltyLoading,
696
+ superCoinsLoading = props.superCoinsLoading,
697
+ walletLoading = props.walletLoading,
698
+ walletChipClick = props.walletChipClick,
699
+ supercoinsChipClick = props.supercoinsChipClick,
700
+ loyaltyChipClick = props.loyaltyChipClick;
701
+ return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
702
+ className: 'flex p-4 pt-0 flex-start flex-gap-1',
703
+ style: {
704
+ alignSelf: 'stretch'
705
+ }
706
+ }, {
707
+ children: [loyaltyLoading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
708
+ width: '50px',
709
+ height: '32px',
710
+ borderRadius: '8px'
711
+ }) : selectedLoyaltyType && LOYALTY_DATA[selectedLoyaltyType] && jsxRuntime.jsx(LoyaltyChip, {
712
+ icon: LOYALTY_DATA[selectedLoyaltyType].icon,
713
+ borderGradient: LOYALTY_DATA[selectedLoyaltyType].borderGradient,
714
+ backgroundGradient: LOYALTY_DATA[selectedLoyaltyType].backgroundGradient,
715
+ handleChipClick: loyaltyChipClick
716
+ }), superCoinsLoading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
717
+ width: '50px',
718
+ height: '32px',
719
+ borderRadius: '8px'
720
+ }) : jsxRuntime.jsx(ExpandableItem, {
721
+ icon: jsxRuntime.jsx(ctDesignIcons.Supercoin, {
722
+ width: 20,
723
+ height: 20
724
+ }),
725
+ value: superCoinBalance,
726
+ handleChipClick: supercoinsChipClick,
727
+ type: 'supercoins'
728
+ }), walletLoading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
729
+ width: '50px',
730
+ height: '32px',
731
+ borderRadius: '8px'
732
+ }) : jsxRuntime.jsx(ExpandableItem, {
733
+ icon: jsxRuntime.jsx(ctDesignIcons.Wallet, {
734
+ width: 20,
735
+ height: 20
736
+ }),
737
+ value: walletBalance,
738
+ handleChipClick: walletChipClick,
739
+ type: 'wallet'
740
+ })]
741
+ }));
486
742
  };
487
743
 
744
+ var HoverableContainer = /*#__PURE__*/styled__default.default(ctDesignContainer.Container).withConfig({
745
+ displayName: "StyledHeader__HoverableContainer",
746
+ componentId: "sc-aht4pl-0"
747
+ })(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"])));
748
+ var LogoutButton = /*#__PURE__*/styled__default.default(ctDesignContainer.Container).withConfig({
749
+ displayName: "StyledHeader__LogoutButton",
750
+ componentId: "sc-aht4pl-1"
751
+ })(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"])));
752
+ var templateObject_1, templateObject_2;
753
+
488
754
  var AccountDropdownContent = function (props) {
489
- 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;
490
- var containerRef = useDropdownAnimation(isOpen).containerRef;
491
- var _b = react.useMemo(function () {
492
- var userGreeting = userName && "Hello ".concat(userName, "!");
493
- var phoneNumber = countryCode && userMobileNumber ? "".concat(countryCode, " ").concat(userMobileNumber) : '';
494
- return { userGreeting: userGreeting, phoneNumber: phoneNumber };
495
- }, [userName, userMobileNumber, countryCode]), userGreeting = _b.userGreeting, phoneNumber = _b.phoneNumber;
496
- var handleRedirectClick = function (redirectLink) {
497
- return function () {
498
- window.location.href = redirectLink;
499
- };
755
+ var _a = props || {},
756
+ handleLogout = _a.handleLogout,
757
+ userName = _a.userName,
758
+ userMobileNumber = _a.userMobileNumber,
759
+ countryCode = _a.countryCode,
760
+ userDetailsLoading = _a.userDetailsLoading,
761
+ superCoinBalance = _a.fkSupercoinBurnBalance,
762
+ walletBalance = _a.walletBalance,
763
+ loyaltyType = _a.loyaltyType,
764
+ loyaltyLoading = _a.loyaltyLoading,
765
+ walletLoading = _a.walletLoading,
766
+ superCoinsLoading = _a.superCoinsLoading,
767
+ walletChipClick = _a.walletChipClick,
768
+ supercoinsChipClick = _a.supercoinsChipClick,
769
+ loyaltyChipClick = _a.loyaltyChipClick,
770
+ isOpen = _a.isOpen;
771
+ var containerRef = useDropdownAnimation(isOpen).containerRef;
772
+ var _b = react.useMemo(function () {
773
+ var userGreeting = userName && "Hello ".concat(userName, "!");
774
+ var phoneNumber = countryCode && userMobileNumber ? "".concat(countryCode, " ").concat(userMobileNumber) : '';
775
+ return {
776
+ userGreeting: userGreeting,
777
+ phoneNumber: phoneNumber
778
+ };
779
+ }, [userName, userMobileNumber, countryCode]),
780
+ userGreeting = _b.userGreeting,
781
+ phoneNumber = _b.phoneNumber;
782
+ var handleRedirectClick = function (redirectLink) {
783
+ return function () {
784
+ window.location.href = redirectLink;
500
785
  };
501
- react.useEffect(function () {
502
- var headerAccBtn = document.getElementById(HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID);
503
- var accountOptionsElem = document.getElementById(ACCOUNT_OPTIONS_CONTAINER_ID);
504
- var positionAccountOptionsDiv = function () {
505
- var headerBtnRight = headerAccBtn === null || headerAccBtn === void 0 ? void 0 : headerAccBtn.getBoundingClientRect().right;
506
- if (accountOptionsElem && headerBtnRight) {
507
- accountOptionsElem.style.left = "".concat(headerBtnRight - ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px");
508
- }
509
- };
510
- positionAccountOptionsDiv();
511
- }, []);
512
- var renderUserData = function () {
513
- 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) }))); };
514
- 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')] })) })));
786
+ };
787
+ react.useEffect(function () {
788
+ var headerAccBtn = document.getElementById(HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID);
789
+ var accountOptionsElem = document.getElementById(ACCOUNT_OPTIONS_CONTAINER_ID);
790
+ var positionAccountOptionsDiv = function () {
791
+ var headerBtnRight = headerAccBtn === null || headerAccBtn === void 0 ? void 0 : headerAccBtn.getBoundingClientRect().right;
792
+ if (accountOptionsElem && headerBtnRight) {
793
+ accountOptionsElem.style.left = "".concat(headerBtnRight - ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px");
794
+ }
795
+ };
796
+ positionAccountOptionsDiv();
797
+ }, []);
798
+ var renderUserData = function () {
799
+ var renderContent = function (loading, content, variant, color) {
800
+ return jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
801
+ variant: variant,
802
+ color: color
803
+ }, {
804
+ children: loading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
805
+ height: variant === 'HM3' ? '18px' : '12px',
806
+ width: variant === 'HM3' ? '140px' : '200px'
807
+ }) : content
808
+ }));
515
809
  };
516
- 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: {
517
- borderBottomLeftRadius: 12,
518
- borderBottomRightRadius: 12,
519
- rowGap: 8,
520
- } }, { children: [ACCOUNT_OPTIONS_POPUP_CONFIG.map(function (_a) {
521
- var text = _a.text, icon = _a.icon, redirectionLink = _a.redirectionLink;
522
- 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)));
523
- }), jsxRuntime.jsx(ctDesignDivider.Divider, { style: {
524
- borderBottom: '1px dashed #E6E6E6',
525
- } }), 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 }))] }))] }))] })));
810
+ return jsxRuntime.jsx(ctDesignContainer.Container, __assign({
811
+ className: 'flex flex-column flex-gap-1'
812
+ }, {
813
+ children: userGreeting ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
814
+ children: [renderContent(userDetailsLoading, userGreeting, 'HM3', 'primary'), renderContent(userDetailsLoading, "".concat(LOGGEDIN_USER_TEXT, " ").concat(phoneNumber), 'P3', 'subheading')]
815
+ }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
816
+ children: [renderContent(userDetailsLoading, LOGGEDIN_USER_TEXT, 'P3', 'subheading'), renderContent(userDetailsLoading, phoneNumber, 'HM3', 'primary')]
817
+ })
818
+ }));
819
+ };
820
+ return jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
821
+ id: ACCOUNT_OPTIONS_CONTAINER_ID,
822
+ ref: containerRef,
823
+ className: 'flex flex-column br-16 o-hidden',
824
+ css: {
825
+ zIndex: 1002,
826
+ opacity: 0,
827
+ top: '76px',
828
+ position: 'fixed'
829
+ },
830
+ width: "".concat(ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px"),
831
+ background: '#FFF1EC'
832
+ }, {
833
+ children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({
834
+ className: 'p-4',
835
+ height: '72px'
836
+ }, {
837
+ children: renderUserData()
838
+ })), jsxRuntime.jsx(RewardsSection, {
839
+ fkSupercoinBurnBalance: superCoinBalance,
840
+ walletBalance: walletBalance,
841
+ loyaltyType: loyaltyType,
842
+ loyaltyLoading: loyaltyLoading,
843
+ superCoinsLoading: superCoinsLoading,
844
+ walletLoading: walletLoading,
845
+ walletChipClick: walletChipClick,
846
+ supercoinsChipClick: supercoinsChipClick,
847
+ loyaltyChipClick: loyaltyChipClick
848
+ }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
849
+ className: 'p-2 flex flex-column',
850
+ backgroundColor: 'white',
851
+ style: {
852
+ borderBottomLeftRadius: 12,
853
+ borderBottomRightRadius: 12,
854
+ rowGap: 8
855
+ }
856
+ }, {
857
+ children: [ACCOUNT_OPTIONS_POPUP_CONFIG.map(function (_a) {
858
+ var text = _a.text,
859
+ icon = _a.icon,
860
+ redirectionLink = _a.redirectionLink;
861
+ return jsxRuntime.jsx(HoverableContainer, __assign({
862
+ onClick: handleRedirectClick(redirectionLink)
863
+ }, {
864
+ children: jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
865
+ className: 'flex c-pointer',
866
+ style: {
867
+ columnGap: '8px'
868
+ }
869
+ }, {
870
+ children: [icon, jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
871
+ variant: 'P1',
872
+ className: 'flex flex-middle c-pointer'
873
+ }, {
874
+ children: text
875
+ }))]
876
+ }))
877
+ }), "account-option-".concat(text));
878
+ }), jsxRuntime.jsx(ctDesignDivider.Divider, {
879
+ style: {
880
+ borderBottom: '1px dashed #E6E6E6'
881
+ }
882
+ }), jsxRuntime.jsxs(LogoutButton, __assign({
883
+ onClick: handleLogout
884
+ }, {
885
+ children: [jsxRuntime.jsx(ctDesignIcons.Signout, {
886
+ height: 24,
887
+ width: 24
888
+ }), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
889
+ variant: 'P1',
890
+ className: 'flex flex-middle c-pointer',
891
+ color: 'warning'
892
+ }, {
893
+ children: SIGN_OUT_TEXT
894
+ }))]
895
+ }))]
896
+ }))]
897
+ }));
526
898
  };
527
899
 
528
900
  var UserAccount = function (props) {
529
- 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;
530
- var _a = useHoverDropdown({ openDelay: 500, closeDelay: 50 }), isDropdownVisible = _a.isDropdownVisible, handleOnMouseEnter = _a.handleOnMouseEnter, handleOnMouseLeave = _a.handleOnMouseLeave, handleDropdownMouseEnter = _a.handleDropdownMouseEnter, handleDropdownMouseLeave = _a.handleDropdownMouseLeave;
531
- 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, isOpen: isDropdownVisible }) }))] }));
901
+ var handleLogout = props.handleLogout,
902
+ userDetailsLoading = props.userDetailsLoading,
903
+ userName = props.userName,
904
+ userMobileNumber = props.userMobileNumber,
905
+ countryCode = props.countryCode,
906
+ fkSupercoinBurnBalance = props.fkSupercoinBurnBalance,
907
+ walletBalance = props.walletBalance,
908
+ loyaltyType = props.loyaltyType,
909
+ walletLoading = props.walletLoading,
910
+ superCoinsLoading = props.superCoinsLoading,
911
+ loyaltyLoading = props.loyaltyLoading,
912
+ loyaltyChipClick = props.loyaltyChipClick,
913
+ supercoinsChipClick = props.supercoinsChipClick,
914
+ walletChipClick = props.walletChipClick;
915
+ var _a = useHoverDropdown({
916
+ openDelay: 500,
917
+ closeDelay: 50
918
+ }),
919
+ isDropdownVisible = _a.isDropdownVisible,
920
+ handleOnMouseEnter = _a.handleOnMouseEnter,
921
+ handleOnMouseLeave = _a.handleOnMouseLeave,
922
+ handleDropdownMouseEnter = _a.handleDropdownMouseEnter,
923
+ handleDropdownMouseLeave = _a.handleDropdownMouseLeave;
924
+ return jsxRuntime.jsxs(ctDesignContainer.Container, {
925
+ children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
926
+ className: "flex px-3 py-2 flex-middle br-12 h-100p c-pointer",
927
+ style: {
928
+ columnGap: 8,
929
+ height: 64
930
+ },
931
+ onMouseEnter: function () {
932
+ return handleOnMouseEnter(4);
933
+ },
934
+ onMouseLeave: handleOnMouseLeave,
935
+ id: HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID
936
+ }, {
937
+ children: [jsxRuntime.jsx(ctDesignIcons.MyAccount, {
938
+ color: isDropdownVisible ? '#FF4F17' : '#1A1A1A'
939
+ }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
940
+ className: 'flex flex-row flex-middle'
941
+ }, {
942
+ children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
943
+ variant: 'B2',
944
+ className: 'c-pointer',
945
+ color: isDropdownVisible ? 'secondary' : 'primary'
946
+ }, {
947
+ children: "My Account"
948
+ })), jsxRuntime.jsx(ctDesignIcons.ChevronDown, {
949
+ width: 20,
950
+ height: 20,
951
+ fill: isDropdownVisible ? '#FF4F17' : '#1A1A1A'
952
+ })]
953
+ }))]
954
+ })), jsxRuntime.jsx(HeaderAnimatedMask, __assign({
955
+ show: isDropdownVisible,
956
+ marginTop: '64px',
957
+ handleDropdownMouseEnter: handleDropdownMouseEnter,
958
+ handleDropdownMouseLeave: handleDropdownMouseLeave,
959
+ onMaskClick: handleDropdownMouseLeave
960
+ }, {
961
+ children: jsxRuntime.jsx(AccountDropdownContent, {
962
+ handleLogout: handleLogout,
963
+ userDetailsLoading: userDetailsLoading,
964
+ userName: userName,
965
+ userMobileNumber: userMobileNumber,
966
+ countryCode: countryCode,
967
+ loyaltyType: loyaltyType,
968
+ walletBalance: walletBalance,
969
+ fkSupercoinBurnBalance: fkSupercoinBurnBalance,
970
+ walletLoading: walletLoading,
971
+ superCoinsLoading: superCoinsLoading,
972
+ loyaltyLoading: loyaltyLoading,
973
+ loyaltyChipClick: loyaltyChipClick,
974
+ walletChipClick: walletChipClick,
975
+ supercoinsChipClick: supercoinsChipClick,
976
+ isOpen: isDropdownVisible
977
+ })
978
+ }))]
979
+ });
532
980
  };
533
981
 
534
982
  var Header = function (props) {
535
- 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;
536
- var _c = useHoverDropdown({
537
- openDelay: 500,
538
- }), isDropdownVisible = _c.isDropdownVisible, hoveredElemIndex = _c.hoveredElemIndex, handleOnMouseEnter = _c.handleOnMouseEnter, handleOnMouseLeave = _c.handleOnMouseLeave, handleDropdownMouseEnter = _c.handleDropdownMouseEnter, handleDropdownMouseLeave = _c.handleDropdownMouseLeave;
539
- 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: {
540
- zIndex: 1000,
541
- height: 64,
542
- borderBottom: '1px solid #E6E6E6',
543
- background: '#F7FAFF',
544
- } }, { children: jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ className: 'flex flex-middle flex-between flex-gap-6', style: {
545
- maxWidth: 1440,
546
- padding: '0px 28px',
547
- flex: '1 0 0',
548
- } }, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ className: 'flex flex-row flex-center flex-middle' }, { children: [jsxRuntime.jsx(ctDesignIcons.CTLogo, {}), jsxRuntime.jsx(ctDesignDivider.Divider, { style: {
549
- width: 12,
550
- marginLeft: 2,
551
- marginRight: 2,
552
- transform: 'rotate(90deg)',
553
- borderBottom: '1px solid #e0e0e0',
554
- } }), 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) {
555
- var isHovered = hoveredElemIndex === index;
556
- 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 () {
557
- if (option.isClickable) {
558
- window.location.href = option.link;
559
- }
560
- } }, { 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, { isOpen: hoveredElemIndex === index && option.isHoverable && isDropdownVisible }) }))] }));
561
- }) })), isUserLoggedIn && (jsxRuntime.jsx(ctDesignDivider.Divider, { style: {
562
- width: 12,
563
- margin: '0 -18px',
564
- transform: 'rotate(90deg)',
565
- borderBottom: '1px solid #e0e0e0',
566
- } })), 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: {
567
- width: 153,
568
- height: 40,
569
- border: '1px solid #1A1A1A',
570
- }, loading: false }, { children: jsxRuntime.jsx(ctDesignTypography.Typography, __assign({ componentNode: 'span', variant: 'L2' }, { children: "Login" })) }))) })] }))] })) })), showAllLobs && jsxRuntime.jsx(LobsHeader, { selectedLOB: selectedLOB })] }));
983
+ var superCoinsLoading = props.superCoinsLoading,
984
+ fkSupercoinBurnBalance = props.fkSupercoinBurnBalance,
985
+ onLoginButtonClick = props.onLoginButtonClick,
986
+ _a = props.showAllLobs,
987
+ showAllLobs = _a === void 0 ? false : _a,
988
+ selectedLOB = props.selectedLOB,
989
+ isUserLoggedIn = props.isUserLoggedIn,
990
+ handleLogoutClick = props.handleLogoutClick,
991
+ walletBalance = props.walletBalance,
992
+ walletLoading = props.walletLoading,
993
+ loyaltyLoading = props.loyaltyLoading,
994
+ loyaltyType = props.loyaltyType,
995
+ userDetailsLoading = props.userDetailsLoading,
996
+ userName = props.userName,
997
+ userMobileNumber = props.userMobileNumber,
998
+ countryCode = props.countryCode,
999
+ loyaltyChipClick = props.loyaltyChipClick,
1000
+ supercoinsChipClick = props.supercoinsChipClick,
1001
+ walletChipClick = props.walletChipClick;
1002
+ props.ravenPayload;
1003
+ props.ravenPushCallback;
1004
+ var _c = useHoverDropdown({
1005
+ openDelay: 500
1006
+ }),
1007
+ isDropdownVisible = _c.isDropdownVisible,
1008
+ hoveredElemIndex = _c.hoveredElemIndex,
1009
+ handleOnMouseEnter = _c.handleOnMouseEnter,
1010
+ handleOnMouseLeave = _c.handleOnMouseLeave,
1011
+ handleDropdownMouseEnter = _c.handleDropdownMouseEnter,
1012
+ handleDropdownMouseLeave = _c.handleDropdownMouseLeave;
1013
+ return jsxRuntime.jsxs(jsxRuntime.Fragment, {
1014
+ children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({
1015
+ className: 'flex t-0 p-sticky w-100p flex-middle flex-center flex-gap-6 flex-no-shrink',
1016
+ style: {
1017
+ zIndex: 1000,
1018
+ height: 64,
1019
+ borderBottom: '1px solid #E6E6E6',
1020
+ background: '#F7FAFF'
1021
+ }
1022
+ }, {
1023
+ children: jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
1024
+ className: 'flex flex-middle flex-between flex-gap-6',
1025
+ style: {
1026
+ maxWidth: 1440,
1027
+ padding: '0px 28px',
1028
+ flex: '1 0 0'
1029
+ }
1030
+ }, {
1031
+ children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
1032
+ className: 'flex flex-row flex-center flex-middle'
1033
+ }, {
1034
+ children: [jsxRuntime.jsx(ctDesignIcons.CTLogo, {}), jsxRuntime.jsx(ctDesignDivider.Divider, {
1035
+ style: {
1036
+ width: 12,
1037
+ marginLeft: 2,
1038
+ marginRight: 2,
1039
+ transform: 'rotate(90deg)',
1040
+ borderBottom: '1px solid #e0e0e0'
1041
+ }
1042
+ }), jsxRuntime.jsx(ctDesignIcons.Fkcompany, {})]
1043
+ })), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
1044
+ className: 'flex flex-row flex-middle flex-center flex-cg-6'
1045
+ }, {
1046
+ children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({
1047
+ className: 'flex flex-row flex-middle flex-center flex-cg-1'
1048
+ }, {
1049
+ children: NAVBAR_OPTIONS.map(function (option, index) {
1050
+ var isHovered = hoveredElemIndex === index;
1051
+ return jsxRuntime.jsxs(ctDesignContainer.Container, {
1052
+ children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
1053
+ onMouseEnter: function () {
1054
+ return handleOnMouseEnter(index);
1055
+ },
1056
+ onMouseLeave: handleOnMouseLeave,
1057
+ className: 'flex flex-row flex-middle px-3 py-2 c-pointer p-relative',
1058
+ style: {
1059
+ columnGap: 8,
1060
+ height: 64
1061
+ },
1062
+ onClick: function () {
1063
+ if (option.isClickable) {
1064
+ window.location.href = option.link;
1065
+ }
1066
+ }
1067
+ }, {
1068
+ children: [jsxRuntime.jsx(option.lefticon, {
1069
+ color: isHovered ? '#FF4F17' : '#1A1A1A'
1070
+ }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
1071
+ className: 'flex flex-row flex-middle'
1072
+ }, {
1073
+ children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
1074
+ variant: 'B2',
1075
+ color: isHovered ? 'secondary' : 'primary',
1076
+ isClickable: true
1077
+ }, {
1078
+ children: option.text
1079
+ })), option.rightIcon && jsxRuntime.jsx(option.rightIcon, {
1080
+ width: 20,
1081
+ height: 20,
1082
+ fill: isHovered ? '#FF4F17' : '#1A1A1A'
1083
+ })]
1084
+ }))]
1085
+ }), "nav-option-".concat(index)), jsxRuntime.jsx(HeaderAnimatedMask, __assign({
1086
+ show: hoveredElemIndex === index && option.isHoverable && isDropdownVisible,
1087
+ marginTop: '64px',
1088
+ handleDropdownMouseEnter: handleDropdownMouseEnter,
1089
+ handleDropdownMouseLeave: handleDropdownMouseLeave,
1090
+ onMaskClick: handleDropdownMouseLeave
1091
+ }, {
1092
+ children: jsxRuntime.jsx(BusinessDropdownContent, {
1093
+ isOpen: hoveredElemIndex === index && option.isHoverable && isDropdownVisible
1094
+ })
1095
+ }))]
1096
+ });
1097
+ })
1098
+ })), isUserLoggedIn && jsxRuntime.jsx(ctDesignDivider.Divider, {
1099
+ style: {
1100
+ width: 12,
1101
+ margin: '0 -18px',
1102
+ transform: 'rotate(90deg)',
1103
+ borderBottom: '1px solid #e0e0e0'
1104
+ }
1105
+ }), jsxRuntime.jsx(ctDesignContainer.Container, {
1106
+ children: isUserLoggedIn ? jsxRuntime.jsx(ctDesignContainer.Container, __assign({
1107
+ className: 'flex flex-row flex-middle'
1108
+ }, {
1109
+ children: jsxRuntime.jsx(UserAccount, {
1110
+ handleLogout: handleLogoutClick,
1111
+ superCoinsLoading: superCoinsLoading,
1112
+ fkSupercoinBurnBalance: fkSupercoinBurnBalance,
1113
+ walletBalance: walletBalance,
1114
+ walletLoading: walletLoading,
1115
+ loyaltyLoading: loyaltyLoading,
1116
+ loyaltyType: loyaltyType,
1117
+ userDetailsLoading: userDetailsLoading,
1118
+ userName: userName,
1119
+ userMobileNumber: userMobileNumber,
1120
+ countryCode: countryCode,
1121
+ walletChipClick: walletChipClick,
1122
+ supercoinsChipClick: supercoinsChipClick,
1123
+ loyaltyChipClick: loyaltyChipClick
1124
+ })
1125
+ })) : jsxRuntime.jsx(ctDesignButton.Button, __assign({
1126
+ className: "fw-400 fs-14 login-button",
1127
+ onClick: onLoginButtonClick,
1128
+ style: {
1129
+ width: 153,
1130
+ height: 40,
1131
+ border: '1px solid #1A1A1A'
1132
+ },
1133
+ loading: false
1134
+ }, {
1135
+ children: jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
1136
+ componentNode: 'span',
1137
+ variant: 'L2'
1138
+ }, {
1139
+ children: "Login"
1140
+ }))
1141
+ }))
1142
+ })]
1143
+ }))]
1144
+ }))
1145
+ })), showAllLobs && jsxRuntime.jsx(LobsHeader, {
1146
+ selectedLOB: selectedLOB
1147
+ })]
1148
+ });
571
1149
  };
572
1150
 
573
1151
  exports.Header = Header;