kupos-ui-components-lib 10.4.8 โ 10.4.10
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/components/ServiceItem/PeruServiceItemDesktop.js +4 -4
- package/dist/components/ServiceItem/PeruServiceItemMobile.d.ts +7 -0
- package/dist/components/ServiceItem/PeruServiceItemMobile.js +233 -0
- package/dist/components/ServiceItem/ServiceItemDesktop.js +4 -4
- package/dist/components/ServiceItem/ServiceItemMobile.d.ts +1 -1
- package/dist/components/ServiceItem/ServiceItemMobile.js +3 -2
- package/dist/components/ServiceItem/mobileTypes.d.ts +1 -0
- package/dist/styles.css +9 -3
- package/dist/ui/FeatureServiceUI/FeatureServiceUi.js +2 -2
- package/dist/ui/PaymentCardMobile/PaymentCardMobile.d.ts +4 -0
- package/dist/ui/PaymentCardMobile/PaymentCardMobile.js +531 -0
- package/dist/ui/PaymentCardMobile/index.d.ts +1 -0
- package/dist/ui/PaymentCardMobile/index.js +1 -0
- package/dist/ui/PeruOfferBanner.d.ts +24 -0
- package/dist/ui/PeruOfferBanner.js +94 -0
- package/dist/ui/SeatSection/PeruSeatSection.d.ts +22 -0
- package/dist/ui/SeatSection/PeruSeatSection.js +247 -0
- package/dist/ui/SlidingModal/SlidingModal.d.ts +9 -0
- package/dist/ui/SlidingModal/SlidingModal.js +100 -0
- package/dist/ui/SlidingModal/index.d.ts +2 -0
- package/dist/ui/SlidingModal/index.js +1 -0
- package/dist/ui/mobileweb/SeatSectionMobile.js +15 -1
- package/package.json +1 -1
- package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +7 -6
- package/src/components/ServiceItem/PeruServiceItemMobile.tsx +596 -0
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +2 -2
- package/src/components/ServiceItem/ServiceItemMobile.tsx +44 -1
- package/src/components/ServiceItem/mobileTypes.ts +1 -0
- package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx +2 -2
- package/src/ui/PeruOfferBanner.tsx +298 -0
- package/src/ui/SeatSection/PeruSeatSection.tsx +487 -0
- package/src/ui/mobileweb/SeatSectionMobile.tsx +46 -1
|
@@ -0,0 +1,531 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import DateService from "../../utils/DateService";
|
|
3
|
+
import CommonService from "../../utils/CommonService";
|
|
4
|
+
import SlidingModal from "../SlidingModal/SlidingModal";
|
|
5
|
+
class ModalTabStateWrapper extends React.Component {
|
|
6
|
+
constructor(props) {
|
|
7
|
+
super(props);
|
|
8
|
+
this.state = { modalTab: props.initialTab };
|
|
9
|
+
}
|
|
10
|
+
componentDidUpdate(prevProps) {
|
|
11
|
+
if (this.props.showDetails && !prevProps.showDetails) {
|
|
12
|
+
this.setState({ modalTab: this.props.initialTab });
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
render() {
|
|
16
|
+
return this.props.render(this.state.modalTab, (tab) => this.setState({ modalTab: tab }));
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
export const PaymentCardMobile = (props) => {
|
|
20
|
+
const { serviceNameOnward, serviceNameReturn, currencySign, dateOnward, dateReturn, sourceOnward, sourceReturn, destinationOnward, destinationReturn, boardingStageOnward, boardingStageReturn, droppingStageOnward, droppingStageReturn, boardingTimeOnward, boardingTimeReturn, droppingTimeOnward, droppingTimeReturn, durationOnward, durationReturn, selectSeatOnward, selectSeatReturn, journeyTypeActive, setJourneyTypeActive, translation, trainTypeOnward, trainTypeReturn, colors, trainType, icons, selectedOnward, selectedReturn, removeDiscountAtomValue, netFare, promoCode, onPromoRemove, renderDiscount, discountAmount, currency, insuranceData, isPeru, showDetails = false, setShowDetails, } = props;
|
|
21
|
+
console.log("๐ ~ PaymentCardMobile ~ selectSeatOnward:", selectSeatOnward);
|
|
22
|
+
// We use a Class component wrapper below to hold the state,
|
|
23
|
+
// avoiding Invalid Hook Call issues when linked in external apps with multiple React instances.
|
|
24
|
+
// These will be derived inside the render prop of ModalTabStateWrapper
|
|
25
|
+
// Derive active journey data
|
|
26
|
+
const isReturn = journeyTypeActive === 2;
|
|
27
|
+
const activeBoardingStage = isReturn
|
|
28
|
+
? boardingStageReturn
|
|
29
|
+
: boardingStageOnward;
|
|
30
|
+
const activeBoardingTime = isReturn ? boardingTimeReturn : boardingTimeOnward;
|
|
31
|
+
const activeDroppingStage = isReturn
|
|
32
|
+
? droppingStageReturn
|
|
33
|
+
: droppingStageOnward;
|
|
34
|
+
const activeDroppingTime = isReturn ? droppingTimeReturn : droppingTimeOnward;
|
|
35
|
+
const activeSource = isReturn ? sourceReturn : sourceOnward;
|
|
36
|
+
const activeDest = isReturn ? destinationReturn : destinationOnward;
|
|
37
|
+
const activeServiceName = isReturn ? serviceNameReturn : serviceNameOnward;
|
|
38
|
+
const activeDate = isReturn ? dateReturn : dateOnward;
|
|
39
|
+
const activeDuration = isReturn ? durationReturn : durationOnward;
|
|
40
|
+
const activeTrainType = isReturn ? trainTypeReturn : trainTypeOnward;
|
|
41
|
+
const formatDateBadge = (date) => {
|
|
42
|
+
if (!date)
|
|
43
|
+
return "";
|
|
44
|
+
const day = DateService.getDayNameFromDate(date);
|
|
45
|
+
const d = DateService.getDateFromDate(date);
|
|
46
|
+
const month = DateService.getMonthNameFromDate(date);
|
|
47
|
+
const year = DateService.getYearFromDate(date);
|
|
48
|
+
return `${day ? day.charAt(0).toUpperCase() + day.slice(1) : ""}, ${d} de ${month ? month.toLowerCase() : ""} de ${year}`;
|
|
49
|
+
};
|
|
50
|
+
const formatSubText = (stage, time) => {
|
|
51
|
+
if (!stage && !time)
|
|
52
|
+
return null;
|
|
53
|
+
const timePart = time
|
|
54
|
+
? ` - ${DateService.formatTime ? DateService.formatTime(time) : time}`
|
|
55
|
+
: "";
|
|
56
|
+
return `${stage || ""}${timePart}`;
|
|
57
|
+
};
|
|
58
|
+
// โโ Shared style objects โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
59
|
+
const S = {
|
|
60
|
+
sectionRow: {
|
|
61
|
+
display: "flex",
|
|
62
|
+
justifyContent: "space-between",
|
|
63
|
+
alignItems: "center",
|
|
64
|
+
fontSize: "14px",
|
|
65
|
+
marginBottom: "10px",
|
|
66
|
+
},
|
|
67
|
+
sectionRowValue: {
|
|
68
|
+
textAlign: "right",
|
|
69
|
+
},
|
|
70
|
+
sectionTitle: {
|
|
71
|
+
fontSize: "14px",
|
|
72
|
+
marginBottom: "10px",
|
|
73
|
+
},
|
|
74
|
+
section: {
|
|
75
|
+
marginBottom: "20px",
|
|
76
|
+
},
|
|
77
|
+
};
|
|
78
|
+
return (React.createElement("div", null,
|
|
79
|
+
React.createElement("div", { style: {
|
|
80
|
+
borderRadius: "20px",
|
|
81
|
+
position: "relative",
|
|
82
|
+
backgroundColor: "#fff",
|
|
83
|
+
margin: "0 20px",
|
|
84
|
+
overflow: "visible",
|
|
85
|
+
border: "1px solid #e0e0e0",
|
|
86
|
+
} },
|
|
87
|
+
React.createElement("div", null,
|
|
88
|
+
dateReturn ? (React.createElement("div", { style: {
|
|
89
|
+
display: "flex",
|
|
90
|
+
width: "100%",
|
|
91
|
+
boxShadow: "inset 0 -1px 0 #e0e0e0",
|
|
92
|
+
} },
|
|
93
|
+
React.createElement("div", { onClick: () => setJourneyTypeActive && setJourneyTypeActive(1), style: {
|
|
94
|
+
flex: 1,
|
|
95
|
+
textAlign: "center",
|
|
96
|
+
padding: "16px 0",
|
|
97
|
+
cursor: "pointer",
|
|
98
|
+
fontSize: "14px",
|
|
99
|
+
fontWeight: journeyTypeActive === 1 ? 600 : 500,
|
|
100
|
+
color: journeyTypeActive === 1
|
|
101
|
+
? (colors === null || colors === void 0 ? void 0 : colors.idaBgColor) || "#e05252"
|
|
102
|
+
: "#999999",
|
|
103
|
+
borderBottom: journeyTypeActive === 1
|
|
104
|
+
? `2px solid ${(colors === null || colors === void 0 ? void 0 : colors.idaBgColor) || "#e05252"}`
|
|
105
|
+
: "2px solid transparent",
|
|
106
|
+
transition: "all 0.2s ease",
|
|
107
|
+
} }, (translation === null || translation === void 0 ? void 0 : translation.going) || "Ida"),
|
|
108
|
+
React.createElement("div", { onClick: () => setJourneyTypeActive && setJourneyTypeActive(2), style: {
|
|
109
|
+
flex: 1,
|
|
110
|
+
textAlign: "center",
|
|
111
|
+
padding: "16px 0",
|
|
112
|
+
cursor: "pointer",
|
|
113
|
+
fontSize: "14px",
|
|
114
|
+
fontWeight: journeyTypeActive === 2 ? 600 : 500,
|
|
115
|
+
color: journeyTypeActive === 2
|
|
116
|
+
? (colors === null || colors === void 0 ? void 0 : colors.vueltaBgColor) || "#e05252"
|
|
117
|
+
: "#999999",
|
|
118
|
+
borderBottom: journeyTypeActive === 2
|
|
119
|
+
? `2px solid ${(colors === null || colors === void 0 ? void 0 : colors.vueltaBgColor) || "#e05252"}`
|
|
120
|
+
: "2px solid transparent",
|
|
121
|
+
transition: "all 0.2s ease",
|
|
122
|
+
} }, (translation === null || translation === void 0 ? void 0 : translation.return) || "Vuelta"))) : null,
|
|
123
|
+
React.createElement("div", { style: { padding: "16px 16px 0 16px" } },
|
|
124
|
+
React.createElement("div", { style: {
|
|
125
|
+
display: "flex",
|
|
126
|
+
alignItems: "flex-start",
|
|
127
|
+
justifyContent: "space-between",
|
|
128
|
+
gap: "8px",
|
|
129
|
+
marginBottom: "14px",
|
|
130
|
+
} },
|
|
131
|
+
React.createElement("div", { style: {
|
|
132
|
+
fontSize: "16px",
|
|
133
|
+
fontWeight: 700,
|
|
134
|
+
color: "#2d2d2d",
|
|
135
|
+
lineHeight: 1.3,
|
|
136
|
+
flex: 1,
|
|
137
|
+
} },
|
|
138
|
+
activeServiceName,
|
|
139
|
+
trainType && activeTrainType && (React.createElement("div", { style: {
|
|
140
|
+
fontSize: "12px",
|
|
141
|
+
fontWeight: 400,
|
|
142
|
+
color: "#666",
|
|
143
|
+
marginTop: "2px",
|
|
144
|
+
} }, activeTrainType))),
|
|
145
|
+
activeDate && (React.createElement("div", { style: {
|
|
146
|
+
fontSize: "11px",
|
|
147
|
+
color: "#555",
|
|
148
|
+
textTransform: "capitalize",
|
|
149
|
+
whiteSpace: "nowrap",
|
|
150
|
+
borderRadius: "12px",
|
|
151
|
+
padding: "4px 10px",
|
|
152
|
+
flexShrink: 0,
|
|
153
|
+
backgroundColor: "#F8F8F8",
|
|
154
|
+
} }, formatDateBadge(activeDate)))),
|
|
155
|
+
React.createElement("div", { style: {
|
|
156
|
+
display: "flex",
|
|
157
|
+
alignItems: "flex-start",
|
|
158
|
+
gap: "6px",
|
|
159
|
+
marginBottom: "16px",
|
|
160
|
+
} },
|
|
161
|
+
React.createElement("div", { style: {
|
|
162
|
+
flexShrink: 0,
|
|
163
|
+
width: "28px",
|
|
164
|
+
height: "28px",
|
|
165
|
+
display: "flex",
|
|
166
|
+
alignItems: "center",
|
|
167
|
+
justifyContent: "center",
|
|
168
|
+
marginTop: "2px",
|
|
169
|
+
} }, (icons === null || icons === void 0 ? void 0 : icons.origin) ? (React.createElement("img", { src: icons.origin, style: { width: "18px", height: "18px" }, alt: "origin" })) : (React.createElement("div", { style: {
|
|
170
|
+
width: "22px",
|
|
171
|
+
height: "22px",
|
|
172
|
+
borderRadius: "50%",
|
|
173
|
+
border: "2.5px solid #e0321c",
|
|
174
|
+
display: "flex",
|
|
175
|
+
alignItems: "center",
|
|
176
|
+
justifyContent: "center",
|
|
177
|
+
} },
|
|
178
|
+
React.createElement("div", { style: {
|
|
179
|
+
width: "8px",
|
|
180
|
+
height: "8px",
|
|
181
|
+
borderRadius: "50%",
|
|
182
|
+
backgroundColor: "#e0321c",
|
|
183
|
+
} })))),
|
|
184
|
+
React.createElement("div", { style: { flex: 1 } },
|
|
185
|
+
React.createElement("div", { style: {
|
|
186
|
+
fontSize: "15px",
|
|
187
|
+
fontWeight: 700,
|
|
188
|
+
color: "#464647",
|
|
189
|
+
textTransform: "capitalize",
|
|
190
|
+
lineHeight: 1.3,
|
|
191
|
+
} }, activeSource),
|
|
192
|
+
formatSubText(activeBoardingStage, activeBoardingTime) && (React.createElement("div", { style: {
|
|
193
|
+
fontSize: "12px",
|
|
194
|
+
color: "#464647",
|
|
195
|
+
marginTop: "3px",
|
|
196
|
+
lineHeight: 1.3,
|
|
197
|
+
} }, formatSubText(activeBoardingStage, activeBoardingTime))))),
|
|
198
|
+
React.createElement("div", { style: {
|
|
199
|
+
display: "flex",
|
|
200
|
+
alignItems: "flex-start",
|
|
201
|
+
gap: "8px",
|
|
202
|
+
} },
|
|
203
|
+
React.createElement("div", { style: {
|
|
204
|
+
flexShrink: 0,
|
|
205
|
+
width: "28px",
|
|
206
|
+
height: "28px",
|
|
207
|
+
display: "flex",
|
|
208
|
+
alignItems: "center",
|
|
209
|
+
justifyContent: "center",
|
|
210
|
+
marginTop: "2px",
|
|
211
|
+
} }, (icons === null || icons === void 0 ? void 0 : icons.destination) ? (React.createElement("img", { src: icons.destination, style: { width: "18px", height: "18px" }, alt: "destination" })) : (React.createElement("div", { style: {
|
|
212
|
+
width: "22px",
|
|
213
|
+
height: "22px",
|
|
214
|
+
display: "flex",
|
|
215
|
+
alignItems: "center",
|
|
216
|
+
justifyContent: "center",
|
|
217
|
+
} },
|
|
218
|
+
React.createElement("svg", { viewBox: "0 0 24 24", width: "24", height: "24", fill: "none" },
|
|
219
|
+
React.createElement("path", { d: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z", fill: "#e05252" }))))),
|
|
220
|
+
React.createElement("div", { style: { flex: 1 } },
|
|
221
|
+
React.createElement("div", { style: {
|
|
222
|
+
fontSize: "15px",
|
|
223
|
+
fontWeight: 700,
|
|
224
|
+
color: "#464647",
|
|
225
|
+
textTransform: "capitalize",
|
|
226
|
+
lineHeight: 1.3,
|
|
227
|
+
} }, activeDest),
|
|
228
|
+
formatSubText(activeDroppingStage, activeDroppingTime) && (React.createElement("div", { style: {
|
|
229
|
+
fontSize: "12px",
|
|
230
|
+
color: "#464647",
|
|
231
|
+
marginTop: "3px",
|
|
232
|
+
lineHeight: 1.3,
|
|
233
|
+
} }, formatSubText(activeDroppingStage, activeDroppingTime))))))),
|
|
234
|
+
React.createElement("div", { style: {
|
|
235
|
+
position: "relative",
|
|
236
|
+
display: "flex",
|
|
237
|
+
alignItems: "center",
|
|
238
|
+
height: "26px",
|
|
239
|
+
} },
|
|
240
|
+
React.createElement("div", { style: {
|
|
241
|
+
position: "absolute",
|
|
242
|
+
left: "-1.5px",
|
|
243
|
+
top: 0,
|
|
244
|
+
width: "13px",
|
|
245
|
+
height: "26px",
|
|
246
|
+
borderRadius: "0 13px 13px 0",
|
|
247
|
+
backgroundColor: "#fff",
|
|
248
|
+
border: "1px solid #ccc",
|
|
249
|
+
borderLeft: "none",
|
|
250
|
+
boxSizing: "border-box",
|
|
251
|
+
zIndex: 20,
|
|
252
|
+
} }),
|
|
253
|
+
React.createElement("div", { style: {
|
|
254
|
+
flex: 1,
|
|
255
|
+
margin: "0 13px",
|
|
256
|
+
borderTop: "1.5px dashed #ccc",
|
|
257
|
+
} }),
|
|
258
|
+
React.createElement("div", { style: {
|
|
259
|
+
position: "absolute",
|
|
260
|
+
right: "-1.5px",
|
|
261
|
+
top: 0,
|
|
262
|
+
width: "13px",
|
|
263
|
+
height: "26px",
|
|
264
|
+
borderRadius: "13px 0 0 13px",
|
|
265
|
+
backgroundColor: "#fff",
|
|
266
|
+
border: "1px solid #ccc",
|
|
267
|
+
borderRight: "none",
|
|
268
|
+
boxSizing: "border-box",
|
|
269
|
+
zIndex: 20,
|
|
270
|
+
} })),
|
|
271
|
+
React.createElement(ModalTabStateWrapper, { initialTab: journeyTypeActive || 1, showDetails: showDetails, render: (modalTab, setModalTab) => {
|
|
272
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
273
|
+
const modalIsReturn = modalTab === 2;
|
|
274
|
+
const modalBoardingStage = modalIsReturn
|
|
275
|
+
? boardingStageReturn
|
|
276
|
+
: boardingStageOnward;
|
|
277
|
+
const modalBoardingTime = modalIsReturn
|
|
278
|
+
? boardingTimeReturn
|
|
279
|
+
: boardingTimeOnward;
|
|
280
|
+
const modalDroppingStage = modalIsReturn
|
|
281
|
+
? droppingStageReturn
|
|
282
|
+
: droppingStageOnward;
|
|
283
|
+
const modalDroppingTime = modalIsReturn
|
|
284
|
+
? droppingTimeReturn
|
|
285
|
+
: droppingTimeOnward;
|
|
286
|
+
const modalSource = modalIsReturn ? sourceReturn : sourceOnward;
|
|
287
|
+
const modalDest = modalIsReturn
|
|
288
|
+
? destinationReturn
|
|
289
|
+
: destinationOnward;
|
|
290
|
+
const modalServiceName = modalIsReturn
|
|
291
|
+
? serviceNameReturn
|
|
292
|
+
: serviceNameOnward;
|
|
293
|
+
const modalDuration = modalIsReturn
|
|
294
|
+
? durationReturn
|
|
295
|
+
: durationOnward;
|
|
296
|
+
return (React.createElement(SlidingModal, { isOpen: showDetails, onClose: () => setShowDetails && setShowDetails(false), title: "Detalles del viaje" },
|
|
297
|
+
dateReturn ? (React.createElement("div", { style: {
|
|
298
|
+
display: "flex",
|
|
299
|
+
width: "100%",
|
|
300
|
+
boxShadow: "inset 0 -1px 0 #e0e0e0",
|
|
301
|
+
marginBottom: "20px",
|
|
302
|
+
marginTop: "-10px",
|
|
303
|
+
} },
|
|
304
|
+
React.createElement("div", { onClick: () => setModalTab(1), style: {
|
|
305
|
+
flex: 1,
|
|
306
|
+
textAlign: "center",
|
|
307
|
+
padding: "10px 0 14px 0",
|
|
308
|
+
cursor: "pointer",
|
|
309
|
+
fontSize: "14px",
|
|
310
|
+
fontWeight: modalTab === 1 ? 600 : 500,
|
|
311
|
+
color: modalTab === 1
|
|
312
|
+
? (colors === null || colors === void 0 ? void 0 : colors.idaBgColor) || "#e05252"
|
|
313
|
+
: "#999999",
|
|
314
|
+
borderBottom: modalTab === 1
|
|
315
|
+
? `2px solid ${(colors === null || colors === void 0 ? void 0 : colors.idaBgColor) || "#e05252"}`
|
|
316
|
+
: "2px solid transparent",
|
|
317
|
+
transition: "all 0.2s ease",
|
|
318
|
+
} }, (translation === null || translation === void 0 ? void 0 : translation.going) || "Ida"),
|
|
319
|
+
React.createElement("div", { onClick: () => setModalTab(2), style: {
|
|
320
|
+
flex: 1,
|
|
321
|
+
textAlign: "center",
|
|
322
|
+
padding: "10px 0 14px 0",
|
|
323
|
+
cursor: "pointer",
|
|
324
|
+
fontSize: "14px",
|
|
325
|
+
fontWeight: modalTab === 2 ? 600 : 500,
|
|
326
|
+
color: modalTab === 2
|
|
327
|
+
? (colors === null || colors === void 0 ? void 0 : colors.vueltaBgColor) || "#e05252"
|
|
328
|
+
: "#999999",
|
|
329
|
+
borderBottom: modalTab === 2
|
|
330
|
+
? `2px solid ${(colors === null || colors === void 0 ? void 0 : colors.vueltaBgColor) || "#e05252"}`
|
|
331
|
+
: "2px solid transparent",
|
|
332
|
+
transition: "all 0.2s ease",
|
|
333
|
+
} }, (translation === null || translation === void 0 ? void 0 : translation.return) || "Vuelta"))) : null,
|
|
334
|
+
React.createElement("div", { style: {
|
|
335
|
+
display: "flex",
|
|
336
|
+
flexDirection: "column",
|
|
337
|
+
gap: "12px",
|
|
338
|
+
marginBottom: "30px",
|
|
339
|
+
// borderBottom: "1px solid #f0f0f0",
|
|
340
|
+
} },
|
|
341
|
+
React.createElement("div", { className: "flex items-center gap-[12px] leading-[1.5]" },
|
|
342
|
+
React.createElement("div", { style: {
|
|
343
|
+
flexShrink: 0,
|
|
344
|
+
}, className: "w-[22px] h-[22px] flex items-center justify-center mt-[2px] " },
|
|
345
|
+
React.createElement("img", { src: icons.origin, style: { width: "20px", height: "20px" }, alt: "origin" })),
|
|
346
|
+
React.createElement("div", null,
|
|
347
|
+
React.createElement("div", { style: {
|
|
348
|
+
fontSize: "15px",
|
|
349
|
+
textTransform: "capitalize",
|
|
350
|
+
} }, modalSource),
|
|
351
|
+
formatSubText(modalBoardingStage, modalBoardingTime) && (React.createElement("div", { style: {
|
|
352
|
+
fontSize: "13px",
|
|
353
|
+
marginTop: "2px",
|
|
354
|
+
} }, formatSubText(modalBoardingStage, modalBoardingTime))))),
|
|
355
|
+
React.createElement("div", { className: "flex items-start gap-[12px] leading-[1.5]" },
|
|
356
|
+
React.createElement("div", { style: {
|
|
357
|
+
flexShrink: 0,
|
|
358
|
+
}, className: "w-[22px] h-[22px] flex items-center justify-center mt-[2px] " },
|
|
359
|
+
React.createElement("img", { src: icons.destination, style: { width: "20px", height: "20px" }, alt: "destination" })),
|
|
360
|
+
React.createElement("div", null,
|
|
361
|
+
React.createElement("div", { style: {
|
|
362
|
+
fontSize: "15px",
|
|
363
|
+
fontWeight: 700,
|
|
364
|
+
textTransform: "capitalize",
|
|
365
|
+
} }, modalDest),
|
|
366
|
+
formatSubText(modalDroppingStage, modalDroppingTime) && (React.createElement("div", { style: {
|
|
367
|
+
fontSize: "13px",
|
|
368
|
+
marginTop: "2px",
|
|
369
|
+
} }, formatSubText(modalDroppingStage, modalDroppingTime)))))),
|
|
370
|
+
React.createElement("div", { style: S.section, className: "mt-[30px]" },
|
|
371
|
+
React.createElement("div", { style: S.sectionTitle, className: "bold-text" }, "Viaje"),
|
|
372
|
+
React.createElement("div", { style: S.sectionRow },
|
|
373
|
+
React.createElement("span", { style: { flex: 1 } }, "Empresa"),
|
|
374
|
+
React.createElement("span", { style: S.sectionRowValue, className: "bold-text" }, modalServiceName)),
|
|
375
|
+
modalDuration && (React.createElement("div", { style: S.sectionRow },
|
|
376
|
+
React.createElement("span", { style: { flex: 1 } }, "Duraci\u00F3n"),
|
|
377
|
+
React.createElement("span", { style: S.sectionRowValue, className: "bold-text" }, modalDuration))),
|
|
378
|
+
(modalIsReturn ? selectSeatReturn : selectSeatOnward) &&
|
|
379
|
+
(modalIsReturn ? selectedReturn : selectedOnward) &&
|
|
380
|
+
(modalIsReturn ? selectedReturn[0] : selectedOnward[0]) &&
|
|
381
|
+
(modalIsReturn ? selectedReturn[0] : selectedOnward[0])
|
|
382
|
+
.length > 0 && (React.createElement("div", { style: Object.assign(Object.assign({}, S.sectionRow), { alignItems: "flex-start" }) },
|
|
383
|
+
React.createElement("span", { style: { flex: 1 } }, "Asiento N\u00B0"),
|
|
384
|
+
React.createElement("span", { className: "bold-text flex items-center justify-end gap-[4px] flex-wrap" }, (modalIsReturn
|
|
385
|
+
? selectedReturn[0]
|
|
386
|
+
: selectedOnward[0]).map((val, idx) => {
|
|
387
|
+
var _a, _b;
|
|
388
|
+
return (React.createElement("span", { key: idx, style: {
|
|
389
|
+
display: "inline-flex",
|
|
390
|
+
alignItems: "center",
|
|
391
|
+
} },
|
|
392
|
+
val.number ||
|
|
393
|
+
val.seat_number ||
|
|
394
|
+
val.seatNumber ||
|
|
395
|
+
val.name ||
|
|
396
|
+
"",
|
|
397
|
+
val.type && (React.createElement("span", { style: {
|
|
398
|
+
display: "inline-flex",
|
|
399
|
+
alignItems: "center",
|
|
400
|
+
justifyContent: "center",
|
|
401
|
+
fontSize: "12px",
|
|
402
|
+
marginLeft: "4px",
|
|
403
|
+
} }, (_b = (_a = val.type) === null || _a === void 0 ? void 0 : _a.charAt(0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()))));
|
|
404
|
+
}))))),
|
|
405
|
+
React.createElement("div", { style: S.section, className: "mt-[30px]" },
|
|
406
|
+
React.createElement("div", { style: S.sectionTitle, className: "bold-text" }, "Pol\u00EDtica"),
|
|
407
|
+
React.createElement("div", { style: S.sectionRow },
|
|
408
|
+
React.createElement("span", { style: { flex: 1 } }, "Cancelaci\u00F3n"),
|
|
409
|
+
React.createElement("span", { style: Object.assign(Object.assign({}, S.sectionRowValue), { fontSize: "13px" }), className: "bold-text" }, "Gratis hasta 24h antes"))),
|
|
410
|
+
React.createElement("div", { style: S.section, className: "mt-[30px]" },
|
|
411
|
+
React.createElement("div", { style: S.sectionTitle, className: "bold-text" }, "Tarifa"),
|
|
412
|
+
selectSeatOnward && selectedOnward && selectedOnward[0]
|
|
413
|
+
? selectedOnward[0].map((val, key) => (React.createElement("div", { key: key, style: S.sectionRow },
|
|
414
|
+
React.createElement("span", { style: { flex: 1 } },
|
|
415
|
+
"Tarifa base - ida (",
|
|
416
|
+
selectedOnward[1][key],
|
|
417
|
+
" x",
|
|
418
|
+
" ",
|
|
419
|
+
val.is_pet_seat ? "Asiento Mascota" : val.type,
|
|
420
|
+
")"),
|
|
421
|
+
React.createElement("span", { style: S.sectionRowValue, className: "bold-text" }, CommonService.currency(isPeru
|
|
422
|
+
? Math.round(val.fare * selectedOnward[1][key] * 100) / 100
|
|
423
|
+
: val.fare * selectedOnward[1][key], currencySign)))))
|
|
424
|
+
: null,
|
|
425
|
+
selectSeatReturn && selectedReturn && selectedReturn[0]
|
|
426
|
+
? selectedReturn[0].map((val, key) => (React.createElement("div", { key: key, style: S.sectionRow },
|
|
427
|
+
React.createElement("span", { style: { flex: 1 } },
|
|
428
|
+
"Tarifa base - vuelta (",
|
|
429
|
+
selectedReturn[1][key],
|
|
430
|
+
" x",
|
|
431
|
+
" ",
|
|
432
|
+
val.is_pet_seat ? "Asiento Mascota" : val.type,
|
|
433
|
+
")"),
|
|
434
|
+
React.createElement("span", { style: S.sectionRowValue, className: "bold-text" }, CommonService.currency(isPeru
|
|
435
|
+
? Math.round(val.fare * selectedReturn[1][key] * 100) / 100
|
|
436
|
+
: val.fare * selectedReturn[1][key], currencySign)))))
|
|
437
|
+
: null,
|
|
438
|
+
(insuranceData === null || insuranceData === void 0 ? void 0 : insuranceData.insurance_enabled) ? (React.createElement("div", { style: S.sectionRow },
|
|
439
|
+
React.createElement("span", { style: { flex: 1 } },
|
|
440
|
+
((_b = (_a = selectedOnward === null || selectedOnward === void 0 ? void 0 : selectedOnward[1]) === null || _a === void 0 ? void 0 : _a.reduce((acc, qty) => acc + qty, 0)) !== null && _b !== void 0 ? _b : 0) +
|
|
441
|
+
((_d = (_c = selectedReturn === null || selectedReturn === void 0 ? void 0 : selectedReturn[1]) === null || _c === void 0 ? void 0 : _c.reduce((acc, qty) => acc + qty, 0)) !== null && _d !== void 0 ? _d : 0),
|
|
442
|
+
" ",
|
|
443
|
+
"x Viajero Seguro"),
|
|
444
|
+
React.createElement("span", { style: S.sectionRowValue, className: "bold-text" }, CommonService.currency((_e = insuranceData === null || insuranceData === void 0 ? void 0 : insuranceData.insurance_total) !== null && _e !== void 0 ? _e : 0, currencySign)))) : null,
|
|
445
|
+
((_f = props.serviceFeeDataStateValue) === null || _f === void 0 ? void 0 : _f.service_fee) > 0 && (React.createElement("div", { style: S.sectionRow },
|
|
446
|
+
React.createElement("span", { style: { flex: 1 } }, "Cargo por servicio"),
|
|
447
|
+
React.createElement("span", { style: S.sectionRowValue, className: "bold-text" }, CommonService.currency(props.serviceFeeDataStateValue.service_fee, currencySign)))),
|
|
448
|
+
(promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCodeApplied) && (React.createElement(React.Fragment, null,
|
|
449
|
+
React.createElement("div", { style: S.sectionRow },
|
|
450
|
+
React.createElement("span", { style: { flex: 1 } }, (translation === null || translation === void 0 ? void 0 : translation.promotionalCode) || "Cรณdigo promocional"),
|
|
451
|
+
React.createElement("span", { style: Object.assign(Object.assign({}, S.sectionRowValue), { color: colors === null || colors === void 0 ? void 0 : colors.promoCodePriceColor }), className: "bold-text" }, CommonService.currency((_g = promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) !== null && _g !== void 0 ? _g : 0, currencySign))),
|
|
452
|
+
(promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) ? (React.createElement("div", { style: {
|
|
453
|
+
display: "flex",
|
|
454
|
+
alignItems: "center",
|
|
455
|
+
gap: "5px",
|
|
456
|
+
marginBottom: "8px",
|
|
457
|
+
} },
|
|
458
|
+
React.createElement("span", { style: { color: "#555", fontSize: "13px" } }, promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCode),
|
|
459
|
+
React.createElement("span", { style: { cursor: "pointer" }, onClick: onPromoRemove }, (icons === null || icons === void 0 ? void 0 : icons.closeIcon) && (React.createElement("img", { src: icons.closeIcon, alt: "close", style: { width: "14px", height: "14px" } }))))) : null)),
|
|
460
|
+
discountAmount ? (React.createElement("div", { style: {
|
|
461
|
+
display: "flex",
|
|
462
|
+
flexDirection: "column",
|
|
463
|
+
marginBottom: "10px",
|
|
464
|
+
} },
|
|
465
|
+
React.createElement("div", { style: {
|
|
466
|
+
display: "flex",
|
|
467
|
+
justifyContent: "space-between",
|
|
468
|
+
fontSize: "14px",
|
|
469
|
+
} },
|
|
470
|
+
React.createElement("span", null, "Descuento"),
|
|
471
|
+
React.createElement("span", { style: { fontWeight: 700, color: "#e05252" } },
|
|
472
|
+
renderDiscount ? "" : "- ",
|
|
473
|
+
currency ? currency : "",
|
|
474
|
+
" ",
|
|
475
|
+
CommonService.currency(discountAmount, currencySign))),
|
|
476
|
+
React.createElement("div", { className: "discount-label-wrapper", style: { marginTop: "2px" } },
|
|
477
|
+
React.createElement("style", null, `
|
|
478
|
+
.discount-label-wrapper .discount-row {
|
|
479
|
+
justify-content: flex-start !important;
|
|
480
|
+
margin: 0 !important;
|
|
481
|
+
}
|
|
482
|
+
.discount-label-wrapper .discount-row > div:last-child {
|
|
483
|
+
display: none !important;
|
|
484
|
+
}
|
|
485
|
+
.discount-label-wrapper .font10 span {
|
|
486
|
+
font-size: 13px !important;
|
|
487
|
+
font-weight: 500 !important;
|
|
488
|
+
color: #e05252 !important;
|
|
489
|
+
}
|
|
490
|
+
`),
|
|
491
|
+
renderDiscount && renderDiscount(discountAmount)))) : null,
|
|
492
|
+
React.createElement("div", { style: {
|
|
493
|
+
borderTop: "1.5px dashed #464647",
|
|
494
|
+
margin: "14px 0",
|
|
495
|
+
} }),
|
|
496
|
+
React.createElement("div", { style: {
|
|
497
|
+
display: "flex",
|
|
498
|
+
justifyContent: "space-between",
|
|
499
|
+
alignItems: "center",
|
|
500
|
+
fontSize: "16px",
|
|
501
|
+
fontWeight: 700,
|
|
502
|
+
color: "#1a1a1a",
|
|
503
|
+
} },
|
|
504
|
+
React.createElement("span", null, "Total"),
|
|
505
|
+
React.createElement("span", null,
|
|
506
|
+
currency ? currency : "",
|
|
507
|
+
" ",
|
|
508
|
+
CommonService.currency(isPeru
|
|
509
|
+
? Math.round((removeDiscountAtomValue ? 0 : netFare) * 100) / 100
|
|
510
|
+
: removeDiscountAtomValue
|
|
511
|
+
? 0
|
|
512
|
+
: netFare, currencySign))))));
|
|
513
|
+
} }),
|
|
514
|
+
React.createElement("div", { style: {
|
|
515
|
+
display: "flex",
|
|
516
|
+
alignItems: "center",
|
|
517
|
+
justifyContent: "center",
|
|
518
|
+
gap: "6px",
|
|
519
|
+
paddingBottom: "14px",
|
|
520
|
+
cursor: "pointer",
|
|
521
|
+
userSelect: "none",
|
|
522
|
+
}, onClick: () => setShowDetails && setShowDetails(!showDetails) },
|
|
523
|
+
React.createElement("span", { style: { fontSize: "14px", fontWeight: 700, color: "#464647" } }, "Ver todos los detalles"),
|
|
524
|
+
React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", style: {
|
|
525
|
+
display: "inline-block",
|
|
526
|
+
transition: "transform 0.2s ease",
|
|
527
|
+
flexShrink: 0,
|
|
528
|
+
} },
|
|
529
|
+
React.createElement("path", { d: "M6 9l6 6 6-6", stroke: "#2d2d2d", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }))))));
|
|
530
|
+
};
|
|
531
|
+
export default PaymentCardMobile;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { PaymentCardMobile } from "./PaymentCardMobile";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { PaymentCardMobile } from "./PaymentCardMobile";
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ServiceItemProps } from "../components/ServiceItem/types";
|
|
3
|
+
type ServiceItemSlice = Pick<ServiceItemProps["serviceItem"], "is_dp_enabled" | "offer_text" | "dp_discount_percents" | "dp_discounted_seats" | "show_register_button">;
|
|
4
|
+
interface OfferBannerColors {
|
|
5
|
+
bottomStripColor?: string;
|
|
6
|
+
}
|
|
7
|
+
interface PeruOfferBannerProps {
|
|
8
|
+
offerGradient: string;
|
|
9
|
+
isSoldOut: boolean;
|
|
10
|
+
serviceItem: ServiceItemSlice;
|
|
11
|
+
renderIcon: (name: string, size: string) => React.ReactNode;
|
|
12
|
+
isLoggedIn: boolean;
|
|
13
|
+
showLoginModal: () => void;
|
|
14
|
+
viewersConfig: ServiceItemProps["viewersConfig"];
|
|
15
|
+
getAnimationIcon: (name: string) => unknown;
|
|
16
|
+
showLoginOption?: boolean;
|
|
17
|
+
colors: OfferBannerColors;
|
|
18
|
+
isLinatal?: boolean;
|
|
19
|
+
coachKey?: number;
|
|
20
|
+
isExpand?: any;
|
|
21
|
+
isNewUiEnabled?: boolean;
|
|
22
|
+
}
|
|
23
|
+
declare const PeruOfferBanner: React.FC<PeruOfferBannerProps>;
|
|
24
|
+
export default PeruOfferBanner;
|