@odynn/awayz-flights 0.9.3 → 0.9.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{BookingOption-CkvQdhKK.js → BookingOption-BUMHEwUW.js} +41 -41
- package/dist/assets/BookingOption.css +1 -1
- package/dist/components/BookingOption/BookingOption.js +1 -1
- package/dist/components/FlightResult/FlightResult.js +1 -1
- package/dist/main.js +1 -1
- package/package.json +3 -4
- package/lib/components/BookingOption/BookingOption.tsx +0 -240
- package/lib/components/BookingOption/_styles.booking-option.scss +0 -69
- package/lib/components/FlightItinerary/FlightItinerary.tsx +0 -290
- package/lib/components/FlightItinerary/_styles.flight-itinerary.scss +0 -102
- package/lib/components/FlightResult/FlightResult.stories.tsx +0 -495
- package/lib/components/FlightResult/FlightResult.tsx +0 -612
- package/lib/components/FlightResult/_styles.flight-result.scss +0 -408
- package/lib/components/FlightResult/mocks/DefaultFlightData.args.json +0 -645
- package/lib/components/FlightResult/mocks/NoCabinClassFlightData.args.json +0 -310
- package/lib/components/FlightResult/mocks/index.ts +0 -4
- package/lib/components/HorizontalScroller/HorizontalScroller.tsx +0 -118
- package/lib/components/HorizontalScroller/_styles.horizontal-scroller.scss +0 -79
- package/lib/components/index.ts +0 -2
- package/lib/constants/endpoints.ts +0 -13
- package/lib/enums/EPaymentType.ts +0 -4
- package/lib/enums/index.ts +0 -1
- package/lib/hooks/index.ts +0 -10
- package/lib/hooks/useAirportSearch/useAirportSearch.ts +0 -24
- package/lib/hooks/useAirportSearch/useAirportSearch.types.ts +0 -12
- package/lib/hooks/useFlightSearch/useFlightSearch.ts +0 -488
- package/lib/hooks/useFlightSearch/useFlightSearch.types.ts +0 -254
- package/lib/main.ts +0 -51
- package/lib/services/flights/FlightsService.ts +0 -171
- package/lib/services/flights/FlightsService.types.ts +0 -244
- package/lib/services/wallet/WalletService.ts +0 -60
- package/lib/services/wallet/WalletService.types.ts +0 -159
- package/lib/stores/useFlightStore.ts +0 -35
- package/lib/styles/_animations.scss +0 -366
- package/lib/styles/_colours.scss +0 -20
- package/lib/styles/_fonts.scss +0 -18
- package/lib/styles/_layout.scss +0 -88
- package/lib/styles/_mixins.scss +0 -34
- package/lib/styles/_shared.scss +0 -116
- package/lib/styles/index.scss +0 -4
- package/lib/types/ECabinClass.ts +0 -46
- package/lib/types/enums.ts +0 -10
- package/lib/types/index.ts +0 -1
- package/lib/utils/flightDateUtils.ts +0 -20
- package/lib/utils/flightUtils.ts +0 -563
- package/lib/utils/index.ts +0 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsxs as r, jsx as o, Fragment as
|
|
2
|
-
import { useFeatureFlags as w, CashValue as
|
|
1
|
+
import { jsxs as r, jsx as o, Fragment as m } from "react/jsx-runtime";
|
|
2
|
+
import { useFeatureFlags as w, CashValue as C, EToolTipPosition as u, EInvalidAmountDisplayOption as y, EAmountsDisplayFeature as F, ClientPointsValue as U } from "@odynn/awayz-core";
|
|
3
3
|
import { useQuery as H } from "@tanstack/react-query";
|
|
4
4
|
import "./moment-BGjjqtLQ.js";
|
|
5
5
|
import "./arrayExtensions-DFLvtO8l.js";
|
|
@@ -9,29 +9,29 @@ import { g as $, h as v, i as j, j as q } from "./index-B_j9TSQq.js";
|
|
|
9
9
|
import { EPaymentType as E } from "./enums/EPaymentType.js";
|
|
10
10
|
import { EBaggage as O } from "./hooks/useFlightSearch/useFlightSearch.types.js";
|
|
11
11
|
import { getAirlineProgram as z, formatCabinClass as x } from "./utils/flightUtils.js";
|
|
12
|
-
import './assets/BookingOption.css';const P = (e, l,
|
|
12
|
+
import './assets/BookingOption.css';const P = (e, l, t = l + "s") => e === 1 ? l : t, M = (e) => e ? e.toLowerCase().replace(/-/g, " ").split(" ").map((l) => l.charAt(0).toUpperCase() + l.slice(1)).join(" ") : "";
|
|
13
13
|
function W(e, l = !0) {
|
|
14
14
|
if ((!e || isNaN(e) || e < 0) && l) return "N/A";
|
|
15
|
-
let
|
|
16
|
-
return
|
|
15
|
+
let t = e == null ? void 0 : e.toString().split(".")[0];
|
|
16
|
+
return t == null ? void 0 : t.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
|
17
17
|
}
|
|
18
|
-
const Z = "USD",
|
|
18
|
+
const Z = "USD", to = ({
|
|
19
19
|
type: e,
|
|
20
20
|
title: l,
|
|
21
|
-
cashValue:
|
|
21
|
+
cashValue: t,
|
|
22
22
|
milesValue: R,
|
|
23
23
|
cashFee: p,
|
|
24
24
|
setSelected: g,
|
|
25
25
|
conditions: s,
|
|
26
26
|
slices: c,
|
|
27
|
-
baggages:
|
|
28
|
-
program:
|
|
27
|
+
baggages: N,
|
|
28
|
+
program: f
|
|
29
29
|
}) => {
|
|
30
30
|
var S, D, T;
|
|
31
|
-
const { featureFlags: L } = w(), [d, I] = B(!1),
|
|
32
|
-
queryKey: ["airlineProgram",
|
|
33
|
-
queryFn: () => z(
|
|
34
|
-
enabled: !!
|
|
31
|
+
const { featureFlags: L } = w(), [d, I] = B(!1), n = s == null ? void 0 : s.refundBeforeDeparture, i = s == null ? void 0 : s.changeBeforeDeparture, h = (n != null && n.allowed ? 1 : 0) + (i != null && i.allowed ? 1 : 0) + (((D = (S = c == null ? void 0 : c[0]) == null ? void 0 : S.segments) == null ? void 0 : D.length) || 0), { data: A } = H({
|
|
32
|
+
queryKey: ["airlineProgram", f],
|
|
33
|
+
queryFn: () => z(f),
|
|
34
|
+
enabled: !!f
|
|
35
35
|
});
|
|
36
36
|
return /* @__PURE__ */ r(
|
|
37
37
|
"div",
|
|
@@ -40,11 +40,11 @@ const Z = "USD", no = ({
|
|
|
40
40
|
onClick: (a) => a.stopPropagation(),
|
|
41
41
|
children: [
|
|
42
42
|
/* @__PURE__ */ r("div", { className: "rate-details", children: [
|
|
43
|
-
e === E.POINTS && /* @__PURE__ */ o("img", { src:
|
|
43
|
+
e === E.POINTS && /* @__PURE__ */ o("img", { src: A == null ? void 0 : A.programLogo }),
|
|
44
44
|
/* @__PURE__ */ o("p", { className: "fare-brand-name", children: M(l) })
|
|
45
45
|
] }),
|
|
46
46
|
e === E.CASH && /* @__PURE__ */ r("div", { className: "fare-comparison-content", children: [
|
|
47
|
-
|
|
47
|
+
N == null ? void 0 : N.map((a, k) => /* @__PURE__ */ r(Y.Fragment, { children: [
|
|
48
48
|
a.type === O.CHECKED && /* @__PURE__ */ r("div", { className: "fare-option checked", children: [
|
|
49
49
|
/* @__PURE__ */ o("p", { children: "Checked bags:" }),
|
|
50
50
|
/* @__PURE__ */ o("p", { children: a.quantity })
|
|
@@ -61,7 +61,7 @@ const Z = "USD", no = ({
|
|
|
61
61
|
/* @__PURE__ */ r("div", { className: "fare-option refundable", children: [
|
|
62
62
|
"Refundable:",
|
|
63
63
|
" ",
|
|
64
|
-
|
|
64
|
+
n != null && n.allowed ? /* @__PURE__ */ o(v, { className: "yes" }) : /* @__PURE__ */ o(_, { className: "no" })
|
|
65
65
|
] }),
|
|
66
66
|
/* @__PURE__ */ r("div", { className: "fare-option changeable", children: [
|
|
67
67
|
"Changeable:",
|
|
@@ -76,22 +76,22 @@ const Z = "USD", no = ({
|
|
|
76
76
|
a.stopPropagation(), I(!d);
|
|
77
77
|
},
|
|
78
78
|
children: [
|
|
79
|
-
/* @__PURE__ */ o("p", { children: d ? `Hide ${P(
|
|
79
|
+
/* @__PURE__ */ o("p", { children: d ? `Hide ${P(h, "option")}` : `+${h} ${P(h, "option")}` }),
|
|
80
80
|
/* @__PURE__ */ o("p", { children: d ? /* @__PURE__ */ o(j, {}) : /* @__PURE__ */ o(q, {}) })
|
|
81
81
|
]
|
|
82
82
|
}
|
|
83
83
|
),
|
|
84
|
-
d && /* @__PURE__ */ r(
|
|
85
|
-
(
|
|
84
|
+
d && /* @__PURE__ */ r(m, { children: [
|
|
85
|
+
(n == null ? void 0 : n.allowed) && /* @__PURE__ */ r("div", { className: "fare-option", children: [
|
|
86
86
|
"Refundable Penalty:",
|
|
87
87
|
" ",
|
|
88
88
|
/* @__PURE__ */ o(
|
|
89
|
-
|
|
89
|
+
C,
|
|
90
90
|
{
|
|
91
|
-
amount:
|
|
92
|
-
currency:
|
|
93
|
-
zeroDisplayOption:
|
|
94
|
-
position:
|
|
91
|
+
amount: n.penaltyAmount || 0,
|
|
92
|
+
currency: n.penaltyCurrency || "",
|
|
93
|
+
zeroDisplayOption: y.DISPLAY_AS_ZERO_WITH_CURRENCY,
|
|
94
|
+
position: u.LEFT
|
|
95
95
|
}
|
|
96
96
|
)
|
|
97
97
|
] }),
|
|
@@ -99,12 +99,12 @@ const Z = "USD", no = ({
|
|
|
99
99
|
"Changeable Penalty:",
|
|
100
100
|
" ",
|
|
101
101
|
/* @__PURE__ */ o(
|
|
102
|
-
|
|
102
|
+
C,
|
|
103
103
|
{
|
|
104
104
|
amount: i.penaltyAmount || 0,
|
|
105
105
|
currency: i.penaltyCurrency || "",
|
|
106
|
-
zeroDisplayOption:
|
|
107
|
-
position:
|
|
106
|
+
zeroDisplayOption: y.DISPLAY_AS_ZERO_WITH_CURRENCY,
|
|
107
|
+
position: u.LEFT
|
|
108
108
|
}
|
|
109
109
|
)
|
|
110
110
|
] }),
|
|
@@ -135,37 +135,37 @@ const Z = "USD", no = ({
|
|
|
135
135
|
onClick: (a) => {
|
|
136
136
|
a.stopPropagation(), g();
|
|
137
137
|
},
|
|
138
|
-
children: e === E.CASH &&
|
|
138
|
+
children: e === E.CASH && t ? /* @__PURE__ */ r(m, { children: [
|
|
139
139
|
/* @__PURE__ */ o(
|
|
140
|
-
|
|
140
|
+
C,
|
|
141
141
|
{
|
|
142
|
-
amount:
|
|
143
|
-
currency:
|
|
144
|
-
position:
|
|
145
|
-
zeroDisplayOption:
|
|
142
|
+
amount: t.amount,
|
|
143
|
+
currency: t.currency,
|
|
144
|
+
position: u.LEFT,
|
|
145
|
+
zeroDisplayOption: y.DISPLAY_AS_ZERO_WITH_CURRENCY,
|
|
146
146
|
decimalPlaces: 2
|
|
147
147
|
}
|
|
148
148
|
),
|
|
149
|
-
L.amountsDisplayFeature === F.CASH_AND_CLIENT_POINTS && /* @__PURE__ */ r(
|
|
149
|
+
L.amountsDisplayFeature === F.CASH_AND_CLIENT_POINTS && /* @__PURE__ */ r(m, { children: [
|
|
150
150
|
" / ",
|
|
151
151
|
/* @__PURE__ */ o(
|
|
152
152
|
U,
|
|
153
153
|
{
|
|
154
|
-
currency:
|
|
155
|
-
cashAmount:
|
|
154
|
+
currency: t.currency,
|
|
155
|
+
cashAmount: t.amount
|
|
156
156
|
}
|
|
157
157
|
)
|
|
158
158
|
] })
|
|
159
|
-
] }) : /* @__PURE__ */ r(
|
|
159
|
+
] }) : /* @__PURE__ */ r(m, { children: [
|
|
160
160
|
`${W(R)} miles + `,
|
|
161
161
|
/* @__PURE__ */ o(
|
|
162
|
-
|
|
162
|
+
C,
|
|
163
163
|
{
|
|
164
164
|
amount: (p == null ? void 0 : p.amount) || 0,
|
|
165
165
|
currency: (p == null ? void 0 : p.currency) || Z,
|
|
166
|
-
position:
|
|
166
|
+
position: u.LEFT,
|
|
167
167
|
customDisplay: "No fee",
|
|
168
|
-
zeroDisplayOption:
|
|
168
|
+
zeroDisplayOption: y.CUSTOM
|
|
169
169
|
}
|
|
170
170
|
)
|
|
171
171
|
] })
|
|
@@ -176,7 +176,7 @@ const Z = "USD", no = ({
|
|
|
176
176
|
);
|
|
177
177
|
};
|
|
178
178
|
export {
|
|
179
|
-
|
|
179
|
+
to as B,
|
|
180
180
|
W as c,
|
|
181
181
|
P as p
|
|
182
182
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";*{font-family:Inter,sans-serif!important;margin:0;padding:0;box-sizing:border-box}:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.tip{position:relative}.tip>span{background-color:var(--dark, #14181f);color:#fff;padding:.5rem;border-radius:.5rem;position:absolute;bottom:110%;left:50%;transform:translate(-50%);display:none;transition:all .2s ease-in-out;z-index:100;width:max-content;font-size:.6rem;font-weight:600;text-transform:uppercase;line-height:.8rem;text-align:center;box-sizing:border-box;pointer-events:none}@media screen and (max-width: 480px){.tip>span{width:fit-content}}.tip>span.left{right:100%;top:50%;bottom:auto;left:auto;transform:translateY(-50%)}.tip>span.left:before{left:auto;right:-7.5px;top:50%;transform:translateY(-50%) rotate(-90deg)}.tip>span.right{left:100%;top:50%;bottom:auto;right:auto;transform:translateY(-50%)}.tip>span.right:before{left:-7.5px;right:auto;top:50%;transform:translateY(-50%) rotate(90deg)}.tip>span.bottom{top:100%;left:50%;right:auto;bottom:auto;transform:translate(-50%)}.tip>span.bottom:before{left:50%;right:auto;top:-5px;transform:translate(-50%) rotate(180deg)}.tip>span:before{content:"";position:absolute;bottom:-5px;left:50%;transform:translate(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--dark, #14181f)}.tip:hover>span,.tip:focus>span{display:flex;animation:tip-fade-up .2s ease-in-out}.tip:hover>span.right,.tip:focus>span.right{animation:tip-fade-right .2s ease-in-out}.tip:hover>span.left,.tip:focus>span.left{animation:tip-fade-left .2s ease-in-out}.tip:hover>span.bottom,.tip:focus>span.bottom{animation:tip-fade-down .2s ease-in-out}@keyframes slide-in-right{0%{opacity:0;transform:translate(0)}50%{transform:translate(-100vw);opacity:0}50.001%{opacity:0;transform:translate(105vw)}50.002%{opacity:1;transform:translate(100vw)}to{transform:translate(0)}}@keyframes slide-in-left{0%{opacity:0;transform:translate(0)}50%{transform:translate(100vw);opacity:0}50.001%{opacity:0;transform:translate(-100vw)}50.002%{opacity:1;transform:translate(-100vw)}to{transform:translate(0)}}@keyframes slide-out-right{0%{transform:translate(0)}to{transform:translate(100vw);opacity:1}}@keyframes slide-out-left{0%{transform:translate(0)}to{transform:translate(-100vw);opacity:1}}@keyframes slide-up{0%{transform:translateY(100%)}to{transform:translate(0);opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes fade-in{0%{opacity:0;scale:.9}to{opacity:1;scale:1}}@keyframes scale-out{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes scale-in{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes no-no{0%{transform:translate(0)}20%{transform:translate(-20px)}40%{transform:translate(15px)}60%{transform:translate(-10px)}80%{transform:translate(5px)}to{transform:translate(0)}}@keyframes loading-track{0%{transform:translate(-100%);opacity:0}25%{opacity:1}75%{opacity:1}to{opacity:0;transform:translate(100%)}}@keyframes loading-in{0%{height:0}to{height:5px}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shine{0%{background-position:right}}@keyframes text-pulse{0%{opacity:.75}35%{opacity:1}65%{opacity:1}to{opacity:.75}}@keyframes pulse{0%{opacity:.85}35%{opacity:1}65%{opacity:1}to{opacity:.85}}@keyframes shimmer{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}@keyframes fade-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-down{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-right{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes spring-in{0%{opacity:0;transform:scale(.8)}70%{opacity:1;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes ripple{0%{transform:scale(1)}to{transform:scale(1.1,1.4)}}@keyframes tip-fade-right{0%{opacity:0;transform:translate(-20px,-50%)}to{opacity:1;transform:translateY(-50%)}}@keyframes tip-fade-left{0%{opacity:0;transform:translate(20px,-50%)}to{opacity:1;transform:translateY(-50%)}}@keyframes tip-fade-down{0%{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%)}}@keyframes tip-fade-up{0%{opacity:0;transform:translate(-50%,5px)}to{opacity:1;transform:translate(-50%)}}@keyframes slide-in{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slide-out{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@keyframes scale-fade-in{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scroll-horizontally{0%{transform:translate(0)}to{transform:translate(-50%)}}.flight-booking-option{display:flex;flex-direction:column;border:1px solid var(--border, #e7eef3);border-radius:1rem;cursor:default;-webkit-user-select:none;user-select:none;transition:all .3s ease;padding:1rem;min-width:270px;gap:1rem;height:fit-content}.flight-booking-option .fare-option{display:flex;justify-content:space-between;border-bottom:1px solid var(--border, #e7eef3);padding:.5rem 0}.flight-booking-option .fare-option.show-more-toggle{cursor:pointer}.flight-booking-option .fare-option.show-more-toggle:hover{background-color:var(--background, #f9fdff)}.flight-booking-option .fare-option .yes{color:var(--primary, #1495f2)}.flight-booking-option .fare-option .no{color:var(--danger, #e53935)}.flight-booking-option .fare-option>div{display:flex;gap:.5rem}.flight-booking-option .fare-option>div img{height:20px}.flight-booking-option .rate-details>img{height:30px;max-width:70%}.flight-booking-option .rate-details .fare-brand-name{font-weight:600}.flight-booking-option button{border-radius:50rem;padding:.5rem 1rem;border:none;background-color:var(--primary, #1495f2);color:var(--foreground, #fff);font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center}
|
|
1
|
+
@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";*{font-family:Inter,sans-serif!important;margin:0;padding:0;box-sizing:border-box}:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.tip{position:relative}.tip>span{background-color:var(--dark, #14181f);color:#fff;padding:.5rem;border-radius:.5rem;position:absolute;bottom:110%;left:50%;transform:translate(-50%);display:none;transition:all .2s ease-in-out;z-index:100;width:max-content;font-size:.6rem;font-weight:600;text-transform:uppercase;line-height:.8rem;text-align:center;box-sizing:border-box;pointer-events:none}@media screen and (max-width: 480px){.tip>span{width:fit-content}}.tip>span.left{right:100%;top:50%;bottom:auto;left:auto;transform:translateY(-50%)}.tip>span.left:before{left:auto;right:-7.5px;top:50%;transform:translateY(-50%) rotate(-90deg)}.tip>span.right{left:100%;top:50%;bottom:auto;right:auto;transform:translateY(-50%)}.tip>span.right:before{left:-7.5px;right:auto;top:50%;transform:translateY(-50%) rotate(90deg)}.tip>span.bottom{top:100%;left:50%;right:auto;bottom:auto;transform:translate(-50%)}.tip>span.bottom:before{left:50%;right:auto;top:-5px;transform:translate(-50%) rotate(180deg)}.tip>span:before{content:"";position:absolute;bottom:-5px;left:50%;transform:translate(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--dark, #14181f)}.tip:hover>span,.tip:focus>span{display:flex;animation:tip-fade-up .2s ease-in-out}.tip:hover>span.right,.tip:focus>span.right{animation:tip-fade-right .2s ease-in-out}.tip:hover>span.left,.tip:focus>span.left{animation:tip-fade-left .2s ease-in-out}.tip:hover>span.bottom,.tip:focus>span.bottom{animation:tip-fade-down .2s ease-in-out}@keyframes slide-in-right{0%{opacity:0;transform:translate(0)}50%{transform:translate(-100vw);opacity:0}50.001%{opacity:0;transform:translate(105vw)}50.002%{opacity:1;transform:translate(100vw)}to{transform:translate(0)}}@keyframes slide-in-left{0%{opacity:0;transform:translate(0)}50%{transform:translate(100vw);opacity:0}50.001%{opacity:0;transform:translate(-100vw)}50.002%{opacity:1;transform:translate(-100vw)}to{transform:translate(0)}}@keyframes slide-out-right{0%{transform:translate(0)}to{transform:translate(100vw);opacity:1}}@keyframes slide-out-left{0%{transform:translate(0)}to{transform:translate(-100vw);opacity:1}}@keyframes slide-up{0%{transform:translateY(100%)}to{transform:translate(0);opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes fade-in{0%{opacity:0;scale:.9}to{opacity:1;scale:1}}@keyframes scale-out{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes scale-in{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes no-no{0%{transform:translate(0)}20%{transform:translate(-20px)}40%{transform:translate(15px)}60%{transform:translate(-10px)}80%{transform:translate(5px)}to{transform:translate(0)}}@keyframes loading-track{0%{transform:translate(-100%);opacity:0}25%{opacity:1}75%{opacity:1}to{opacity:0;transform:translate(100%)}}@keyframes loading-in{0%{height:0}to{height:5px}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shine{0%{background-position:right}}@keyframes text-pulse{0%{opacity:.75}35%{opacity:1}65%{opacity:1}to{opacity:.75}}@keyframes pulse{0%{opacity:.85}35%{opacity:1}65%{opacity:1}to{opacity:.85}}@keyframes shimmer{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}@keyframes fade-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-down{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-right{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes spring-in{0%{opacity:0;transform:scale(.8)}70%{opacity:1;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes ripple{0%{transform:scale(1)}to{transform:scale(1.1,1.4)}}@keyframes tip-fade-right{0%{opacity:0;transform:translate(-20px,-50%)}to{opacity:1;transform:translateY(-50%)}}@keyframes tip-fade-left{0%{opacity:0;transform:translate(20px,-50%)}to{opacity:1;transform:translateY(-50%)}}@keyframes tip-fade-down{0%{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%)}}@keyframes tip-fade-up{0%{opacity:0;transform:translate(-50%,5px)}to{opacity:1;transform:translate(-50%)}}@keyframes slide-in{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slide-out{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@keyframes scale-fade-in{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scroll-horizontally{0%{transform:translate(0)}to{transform:translate(-50%)}}.flight-booking-option{display:flex;flex-direction:column;border:1px solid var(--border, #e7eef3);border-radius:1rem;cursor:default;-webkit-user-select:none;user-select:none;transition:all .3s ease;padding:1rem;min-width:270px;gap:1rem;height:fit-content}.flight-booking-option .fare-option{display:flex;justify-content:space-between;border-bottom:1px solid var(--border, #e7eef3);padding:.5rem 0}.flight-booking-option .fare-option.show-more-toggle{cursor:pointer}.flight-booking-option .fare-option.show-more-toggle:hover{background-color:var(--background, #f9fdff)}.flight-booking-option .fare-option .yes{color:var(--primary, #1495f2)}.flight-booking-option .fare-option .no{color:var(--danger, #e53935)}.flight-booking-option .fare-option>div{display:flex;gap:.5rem}.flight-booking-option .fare-option>div img{height:20px}.flight-booking-option .rate-details>img{height:30px;max-width:70%}.flight-booking-option .rate-details .fare-brand-name{font-weight:600}.flight-booking-option button{border-radius:50rem;padding:.5rem 1rem;border:none;background-color:var(--primary, #1495f2);color:var(--foreground, #fff);font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center}.flight-booking-option button p,.flight-booking-option button span{color:var(--foreground, #fff)}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import "react/jsx-runtime";
|
|
2
2
|
import "@odynn/awayz-core";
|
|
3
3
|
import "@tanstack/react-query";
|
|
4
|
-
import { B as x } from "../../BookingOption-
|
|
4
|
+
import { B as x } from "../../BookingOption-BUMHEwUW.js";
|
|
5
5
|
import "../../moment-BGjjqtLQ.js";
|
|
6
6
|
import "../../arrayExtensions-DFLvtO8l.js";
|
|
7
7
|
import "react";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as i, jsxs as n, Fragment as S } from "react/jsx-runtime";
|
|
2
2
|
import { useAwayzContext as he, useFeatureFlags as ue, RewardsService as q, EAmountsDisplayFeature as F, CashValue as M, EToolTipPosition as z, ClientPointsValue as fe, EInvalidAmountDisplayOption as de, awayzClient as J, EFlightBookingOptionsDisplayFeature as K, CurrencyService as ye } from "@odynn/awayz-core";
|
|
3
3
|
import { useQuery as Ne } from "@tanstack/react-query";
|
|
4
|
-
import { p as ve, c as Fe, B as Q } from "../../BookingOption-
|
|
4
|
+
import { p as ve, c as Fe, B as Q } from "../../BookingOption-BUMHEwUW.js";
|
|
5
5
|
import { g as Pe } from "../../index-7zRjF0bU.js";
|
|
6
6
|
import "../../arrayExtensions-DFLvtO8l.js";
|
|
7
7
|
import { E as x } from "../../enums-Bmg_7eKJ.js";
|
package/dist/main.js
CHANGED
|
@@ -3,7 +3,7 @@ import { useAirportSearch as f } from "./hooks/useAirportSearch/useAirportSearch
|
|
|
3
3
|
import { EBaggage as x } from "./hooks/useFlightSearch/useFlightSearch.types.js";
|
|
4
4
|
import "react/jsx-runtime";
|
|
5
5
|
import { c as h, g as C, b as E, a as c } from "./index-7zRjF0bU.js";
|
|
6
|
-
import { c as y } from "./BookingOption-
|
|
6
|
+
import { c as y } from "./BookingOption-BUMHEwUW.js";
|
|
7
7
|
import { E as b, g as T } from "./DateFormats-Db0j7Cpe.js";
|
|
8
8
|
import "./arrayExtensions-DFLvtO8l.js";
|
|
9
9
|
import "react";
|
package/package.json
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@odynn/awayz-flights",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"files": [
|
|
6
|
-
"dist"
|
|
7
|
-
"lib"
|
|
6
|
+
"dist"
|
|
8
7
|
],
|
|
9
|
-
"main": "
|
|
8
|
+
"main": "dist/main.js",
|
|
10
9
|
"types": "./dist/lib/main.d.ts",
|
|
11
10
|
"scripts": {
|
|
12
11
|
"test": "echo \"NOTE: Please run tests from the root\"",
|
|
@@ -1,240 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
CashValue,
|
|
3
|
-
ClientPointsValue,
|
|
4
|
-
EAmountsDisplayFeature,
|
|
5
|
-
EInvalidAmountDisplayOption,
|
|
6
|
-
EToolTipPosition,
|
|
7
|
-
useFeatureFlags
|
|
8
|
-
} from '@odynn/awayz-core';
|
|
9
|
-
import { useQuery } from '@tanstack/react-query';
|
|
10
|
-
import {
|
|
11
|
-
commaSeparatedNumber,
|
|
12
|
-
DEFAULT_CURRENCY,
|
|
13
|
-
ISegment,
|
|
14
|
-
ISlice,
|
|
15
|
-
pluralise,
|
|
16
|
-
toTitleCase
|
|
17
|
-
} from '@type-op/shared';
|
|
18
|
-
import React, { useState } from 'react';
|
|
19
|
-
import { FaTimes } from 'react-icons/fa';
|
|
20
|
-
import {
|
|
21
|
-
FaCheck,
|
|
22
|
-
FaChevronDown,
|
|
23
|
-
FaChevronUp,
|
|
24
|
-
FaSuitcase
|
|
25
|
-
} from 'react-icons/fa6';
|
|
26
|
-
import { EPaymentType } from '../../enums';
|
|
27
|
-
import {
|
|
28
|
-
EBaggage,
|
|
29
|
-
IFlightPaymentOptionBaggage,
|
|
30
|
-
IOfferConditions
|
|
31
|
-
} from '../../hooks/useFlightSearch/useFlightSearch.types';
|
|
32
|
-
import { formatCabinClass, getAirlineProgram } from '../../utils/flightUtils';
|
|
33
|
-
import './_styles.booking-option.scss';
|
|
34
|
-
|
|
35
|
-
interface IBookingOptionProps {
|
|
36
|
-
type: EPaymentType;
|
|
37
|
-
title: string;
|
|
38
|
-
cashValue?: {
|
|
39
|
-
amount: number;
|
|
40
|
-
currency: string;
|
|
41
|
-
};
|
|
42
|
-
milesValue?: number;
|
|
43
|
-
cashFee?: {
|
|
44
|
-
amount: number;
|
|
45
|
-
currency: string;
|
|
46
|
-
};
|
|
47
|
-
setSelected: () => void;
|
|
48
|
-
conditions?: IOfferConditions;
|
|
49
|
-
slices?: ISlice[];
|
|
50
|
-
baggages?: IFlightPaymentOptionBaggage[];
|
|
51
|
-
program?: string;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
const BookingOption = ({
|
|
55
|
-
type,
|
|
56
|
-
title,
|
|
57
|
-
cashValue,
|
|
58
|
-
milesValue,
|
|
59
|
-
cashFee,
|
|
60
|
-
setSelected,
|
|
61
|
-
conditions,
|
|
62
|
-
slices,
|
|
63
|
-
baggages,
|
|
64
|
-
program
|
|
65
|
-
}: IBookingOptionProps) => {
|
|
66
|
-
const { featureFlags } = useFeatureFlags();
|
|
67
|
-
const [showMoreOptions, setShowMoreOptions] = useState(false);
|
|
68
|
-
|
|
69
|
-
const refundable = conditions?.refundBeforeDeparture;
|
|
70
|
-
|
|
71
|
-
const changeable = conditions?.changeBeforeDeparture;
|
|
72
|
-
|
|
73
|
-
const additionalOptionsCount =
|
|
74
|
-
(refundable?.allowed ? 1 : 0) +
|
|
75
|
-
(changeable?.allowed ? 1 : 0) +
|
|
76
|
-
(slices?.[0]?.segments?.length || 0);
|
|
77
|
-
|
|
78
|
-
const { data: programDetails } = useQuery({
|
|
79
|
-
queryKey: ['airlineProgram', program],
|
|
80
|
-
queryFn: () => getAirlineProgram(program!),
|
|
81
|
-
enabled: !!program
|
|
82
|
-
});
|
|
83
|
-
|
|
84
|
-
return (
|
|
85
|
-
<div
|
|
86
|
-
className={`flight-booking-option`}
|
|
87
|
-
onClick={(e) => e.stopPropagation()}
|
|
88
|
-
>
|
|
89
|
-
<div className='rate-details'>
|
|
90
|
-
{type === EPaymentType.POINTS && (
|
|
91
|
-
<img src={programDetails?.programLogo} />
|
|
92
|
-
)}
|
|
93
|
-
<p className='fare-brand-name'>{toTitleCase(title)}</p>
|
|
94
|
-
</div>
|
|
95
|
-
{type === EPaymentType.CASH && (
|
|
96
|
-
<div className={`fare-comparison-content`}>
|
|
97
|
-
{baggages?.map((item, idx: number) => (
|
|
98
|
-
<React.Fragment key={idx}>
|
|
99
|
-
{item.type === EBaggage.CHECKED && (
|
|
100
|
-
<div className='fare-option checked'>
|
|
101
|
-
<p>Checked bags:</p>
|
|
102
|
-
<p>{item.quantity}</p>
|
|
103
|
-
</div>
|
|
104
|
-
)}
|
|
105
|
-
{item.type === EBaggage.CARRY_ON && (
|
|
106
|
-
<div className='fare-option'>
|
|
107
|
-
<p>Carry-on bags:</p>
|
|
108
|
-
<p>{item.quantity}</p>
|
|
109
|
-
</div>
|
|
110
|
-
)}
|
|
111
|
-
{item.type === null && (
|
|
112
|
-
<div className='fare-option'>
|
|
113
|
-
<FaSuitcase />
|
|
114
|
-
<p>N/A</p>
|
|
115
|
-
</div>
|
|
116
|
-
)}
|
|
117
|
-
</React.Fragment>
|
|
118
|
-
))}
|
|
119
|
-
<div className='fare-option refundable'>
|
|
120
|
-
Refundable:{' '}
|
|
121
|
-
{refundable?.allowed ? (
|
|
122
|
-
<FaCheck className='yes' />
|
|
123
|
-
) : (
|
|
124
|
-
<FaTimes className='no' />
|
|
125
|
-
)}
|
|
126
|
-
</div>
|
|
127
|
-
<div className='fare-option changeable'>
|
|
128
|
-
Changeable:{' '}
|
|
129
|
-
{changeable?.allowed ? (
|
|
130
|
-
<FaCheck className='yes' />
|
|
131
|
-
) : (
|
|
132
|
-
<FaTimes className='no' />
|
|
133
|
-
)}
|
|
134
|
-
</div>
|
|
135
|
-
<div
|
|
136
|
-
className='fare-option show-more-toggle'
|
|
137
|
-
onClick={(e) => {
|
|
138
|
-
e.stopPropagation();
|
|
139
|
-
setShowMoreOptions(!showMoreOptions);
|
|
140
|
-
}}
|
|
141
|
-
>
|
|
142
|
-
<p>
|
|
143
|
-
{showMoreOptions
|
|
144
|
-
? `Hide ${pluralise(additionalOptionsCount, 'option')}`
|
|
145
|
-
: `+${additionalOptionsCount} ${pluralise(additionalOptionsCount, 'option')}`}
|
|
146
|
-
</p>
|
|
147
|
-
<p>{showMoreOptions ? <FaChevronUp /> : <FaChevronDown />}</p>
|
|
148
|
-
</div>
|
|
149
|
-
{showMoreOptions && (
|
|
150
|
-
<>
|
|
151
|
-
{refundable?.allowed && (
|
|
152
|
-
<div className='fare-option'>
|
|
153
|
-
Refundable Penalty:{' '}
|
|
154
|
-
<CashValue
|
|
155
|
-
amount={refundable.penaltyAmount || 0}
|
|
156
|
-
currency={refundable.penaltyCurrency || ''}
|
|
157
|
-
zeroDisplayOption={
|
|
158
|
-
EInvalidAmountDisplayOption.DISPLAY_AS_ZERO_WITH_CURRENCY
|
|
159
|
-
}
|
|
160
|
-
position={EToolTipPosition.LEFT}
|
|
161
|
-
/>
|
|
162
|
-
</div>
|
|
163
|
-
)}
|
|
164
|
-
{changeable?.allowed && (
|
|
165
|
-
<div className='fare-option'>
|
|
166
|
-
Changeable Penalty:{' '}
|
|
167
|
-
<CashValue
|
|
168
|
-
amount={changeable.penaltyAmount || 0}
|
|
169
|
-
currency={changeable.penaltyCurrency || ''}
|
|
170
|
-
zeroDisplayOption={
|
|
171
|
-
EInvalidAmountDisplayOption.DISPLAY_AS_ZERO_WITH_CURRENCY
|
|
172
|
-
}
|
|
173
|
-
position={EToolTipPosition.LEFT}
|
|
174
|
-
/>
|
|
175
|
-
</div>
|
|
176
|
-
)}
|
|
177
|
-
{slices?.[0].segments?.map((segment: ISegment) => (
|
|
178
|
-
<div
|
|
179
|
-
className='fare-option checked'
|
|
180
|
-
key={`${segment.origin.iataCode}-${segment.destination.iataCode}`}
|
|
181
|
-
>
|
|
182
|
-
<p>
|
|
183
|
-
{segment.origin.iataCode} - {segment.destination.iataCode}:
|
|
184
|
-
</p>
|
|
185
|
-
<div>
|
|
186
|
-
<img src={segment.operatingCarrier.logo} />
|
|
187
|
-
<p>{formatCabinClass(segment.passengers[0].cabinClass)}</p>
|
|
188
|
-
</div>
|
|
189
|
-
</div>
|
|
190
|
-
))}
|
|
191
|
-
</>
|
|
192
|
-
)}
|
|
193
|
-
</div>
|
|
194
|
-
)}
|
|
195
|
-
<button
|
|
196
|
-
onClick={(e) => {
|
|
197
|
-
e.stopPropagation();
|
|
198
|
-
setSelected();
|
|
199
|
-
}}
|
|
200
|
-
>
|
|
201
|
-
{type === EPaymentType.CASH && !!cashValue ? (
|
|
202
|
-
<span>
|
|
203
|
-
<CashValue
|
|
204
|
-
amount={cashValue.amount}
|
|
205
|
-
currency={cashValue.currency}
|
|
206
|
-
position={EToolTipPosition.LEFT}
|
|
207
|
-
zeroDisplayOption={
|
|
208
|
-
EInvalidAmountDisplayOption.DISPLAY_AS_ZERO_WITH_CURRENCY
|
|
209
|
-
}
|
|
210
|
-
decimalPlaces={2}
|
|
211
|
-
/>
|
|
212
|
-
{featureFlags.amountsDisplayFeature ===
|
|
213
|
-
EAmountsDisplayFeature.CASH_AND_CLIENT_POINTS && (
|
|
214
|
-
<>
|
|
215
|
-
{' / '}
|
|
216
|
-
<ClientPointsValue
|
|
217
|
-
currency={cashValue.currency}
|
|
218
|
-
cashAmount={cashValue.amount}
|
|
219
|
-
/>
|
|
220
|
-
</>
|
|
221
|
-
)}
|
|
222
|
-
</span>
|
|
223
|
-
) : (
|
|
224
|
-
<>
|
|
225
|
-
{`${commaSeparatedNumber(milesValue)} miles + `}
|
|
226
|
-
<CashValue
|
|
227
|
-
amount={cashFee?.amount || 0}
|
|
228
|
-
currency={cashFee?.currency || DEFAULT_CURRENCY}
|
|
229
|
-
position={EToolTipPosition.LEFT}
|
|
230
|
-
customDisplay='No fee'
|
|
231
|
-
zeroDisplayOption={EInvalidAmountDisplayOption.CUSTOM}
|
|
232
|
-
/>
|
|
233
|
-
</>
|
|
234
|
-
)}
|
|
235
|
-
</button>
|
|
236
|
-
</div>
|
|
237
|
-
);
|
|
238
|
-
};
|
|
239
|
-
|
|
240
|
-
export default BookingOption;
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
.flight-booking-option {
|
|
2
|
-
display: flex;
|
|
3
|
-
flex-direction: column;
|
|
4
|
-
border: $border;
|
|
5
|
-
border-radius: $border-radius;
|
|
6
|
-
cursor: default;
|
|
7
|
-
user-select: none;
|
|
8
|
-
transition: all 0.3s ease;
|
|
9
|
-
padding: $padding;
|
|
10
|
-
min-width: 270px;
|
|
11
|
-
gap: $padding;
|
|
12
|
-
height: fit-content;
|
|
13
|
-
|
|
14
|
-
.fare-option {
|
|
15
|
-
display: flex;
|
|
16
|
-
justify-content: space-between;
|
|
17
|
-
border-bottom: $border;
|
|
18
|
-
padding: $padding-sm 0;
|
|
19
|
-
|
|
20
|
-
&.show-more-toggle {
|
|
21
|
-
cursor: pointer;
|
|
22
|
-
|
|
23
|
-
&:hover {
|
|
24
|
-
background-color: colour.$background;
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.yes {
|
|
29
|
-
color: colour.$primary;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.no {
|
|
33
|
-
color: colour.$danger;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
> div {
|
|
37
|
-
display: flex;
|
|
38
|
-
gap: $padding-sm;
|
|
39
|
-
|
|
40
|
-
img {
|
|
41
|
-
height: 20px;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.rate-details {
|
|
47
|
-
> img {
|
|
48
|
-
height: 30px;
|
|
49
|
-
max-width: 70%;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.fare-brand-name {
|
|
53
|
-
font-weight: font.$heavy;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
button {
|
|
58
|
-
border-radius: $border-radius-pill;
|
|
59
|
-
padding: $padding-sm $padding;
|
|
60
|
-
border: none;
|
|
61
|
-
background-color: colour.$primary;
|
|
62
|
-
color: colour.$foreground;
|
|
63
|
-
font-weight: font.$heavy;
|
|
64
|
-
cursor: pointer;
|
|
65
|
-
display: flex;
|
|
66
|
-
align-items: center;
|
|
67
|
-
justify-content: center;
|
|
68
|
-
}
|
|
69
|
-
}
|