kupos-ui-components-lib 10.1.4 → 10.1.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/components/ServiceItem/PeruServiceItemDesktop.js +1 -1
- package/dist/components/ServiceItem/ServiceItemDesktop.js +2 -2
- package/dist/styles.css +8 -5
- package/dist/ui/OfferBanner.js +4 -4
- package/dist/ui/ServiceBadges/ServiceBadges.js +1 -1
- package/dist/ui/mobileweb/ServiceBadgesMobile.js +1 -1
- package/package.json +1 -1
- package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +1 -1
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +2 -2
- package/src/ui/OfferBanner.tsx +6 -4
- package/src/ui/ServiceBadges/ServiceBadges.tsx +1 -1
- package/src/ui/mobileweb/ServiceBadgesMobile.tsx +1 -1
|
@@ -394,7 +394,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
394
394
|
return (React.createElement("div", { className: `relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[65px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
|
|
395
395
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
|
|
396
396
|
showTopLabel
|
|
397
|
-
? "mt-[
|
|
397
|
+
? "mt-[20px]"
|
|
398
398
|
: "mt-[20px]"} ` },
|
|
399
399
|
((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled) && !isSoldOut && (React.createElement(OfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon, showLoginOption: showLoginOption, isNewUiEnabled: isNewUiEnabled, colors: colors })),
|
|
400
400
|
React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
|
|
@@ -296,14 +296,14 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
296
296
|
: serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[65px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
|
|
297
297
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
|
|
298
298
|
showTopLabel
|
|
299
|
-
? "mt-[
|
|
299
|
+
? "mt-[20px]"
|
|
300
300
|
: "mt-[20px]"} ` },
|
|
301
301
|
((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled) && !isSoldOut && (React.createElement(OfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon, showLoginOption: showLoginOption, isNewUiEnabled: isNewUiEnabled, colors: colors, isLinatal: isLinatal })),
|
|
302
302
|
React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
|
|
303
303
|
? "z-[3] rounded-[18px]"
|
|
304
304
|
: "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
|
|
305
305
|
React.createElement("div", { className: " pt-[20px]", style: {
|
|
306
|
-
padding: hasDpEnabled || (
|
|
306
|
+
padding: hasDpEnabled || (isNewUiEnabled && !isSoldOut)
|
|
307
307
|
? "20px 15px 10px 15px"
|
|
308
308
|
: coachKey
|
|
309
309
|
? "20px 15px 20px 15px"
|
package/dist/styles.css
CHANGED
|
@@ -90,8 +90,8 @@
|
|
|
90
90
|
.-bottom-\[36px\] {
|
|
91
91
|
bottom: calc(36px * -1);
|
|
92
92
|
}
|
|
93
|
-
.-bottom-\[
|
|
94
|
-
bottom: calc(
|
|
93
|
+
.-bottom-\[40px\] {
|
|
94
|
+
bottom: calc(40px * -1);
|
|
95
95
|
}
|
|
96
96
|
.bottom-\[11px\] {
|
|
97
97
|
bottom: 11px;
|
|
@@ -243,9 +243,6 @@
|
|
|
243
243
|
.mt-\[24px\] {
|
|
244
244
|
margin-top: 24px;
|
|
245
245
|
}
|
|
246
|
-
.mt-\[30px\] {
|
|
247
|
-
margin-top: 30px;
|
|
248
|
-
}
|
|
249
246
|
.mt-\[50px\] {
|
|
250
247
|
margin-top: 50px;
|
|
251
248
|
}
|
|
@@ -396,6 +393,9 @@
|
|
|
396
393
|
.h-\[30px\] {
|
|
397
394
|
height: 30px;
|
|
398
395
|
}
|
|
396
|
+
.h-\[44px\] {
|
|
397
|
+
height: 44px;
|
|
398
|
+
}
|
|
399
399
|
.h-\[90px\] {
|
|
400
400
|
height: 90px;
|
|
401
401
|
}
|
|
@@ -626,6 +626,9 @@
|
|
|
626
626
|
.justify-end {
|
|
627
627
|
justify-content: flex-end;
|
|
628
628
|
}
|
|
629
|
+
.justify-start {
|
|
630
|
+
justify-content: flex-start;
|
|
631
|
+
}
|
|
629
632
|
.gap-\[1px\] {
|
|
630
633
|
gap: 1px;
|
|
631
634
|
}
|
package/dist/ui/OfferBanner.js
CHANGED
|
@@ -72,13 +72,13 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLo
|
|
|
72
72
|
}
|
|
73
73
|
return null;
|
|
74
74
|
};
|
|
75
|
-
return (React.createElement("div", { className: "text-white
|
|
75
|
+
return (React.createElement("div", { className: "text-white w-full absolute -bottom-[40px] pt-[20px] rounded-b-[14px] text-[14px] mt-[10px]", style: {
|
|
76
76
|
background,
|
|
77
77
|
opacity: isSoldOut ? 0.5 : 1,
|
|
78
|
-
zIndex: isLinatal ? "-1" : "",
|
|
78
|
+
zIndex: isLinatal ? "-1" : "-1",
|
|
79
79
|
} },
|
|
80
|
-
React.createElement("div", { className: "flex justify-
|
|
81
|
-
React.createElement("div", { className: "flex items-center" }, renderLeftContent()),
|
|
80
|
+
React.createElement("div", { className: "flex justify-start items-center h-[44px] w-full gap-[20px] px-[15px]" },
|
|
81
|
+
React.createElement("div", { className: "flex items-center justify-start" }, renderLeftContent()),
|
|
82
82
|
showViewers && (React.createElement(ViewersCount, { serviceItem: serviceItem, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon })))));
|
|
83
83
|
};
|
|
84
84
|
export default OfferBanner;
|
|
@@ -4,7 +4,7 @@ import CommonService from "../../utils/CommonService";
|
|
|
4
4
|
const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translation, serviceItem, isAllinBus = false, boardingName, getAnimationIcon, }) => {
|
|
5
5
|
return (React.createElement("div", { className: "absolute -top-[10px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10" },
|
|
6
6
|
showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`, style: {
|
|
7
|
-
backgroundColor: colors.topLabelBgColor || "
|
|
7
|
+
backgroundColor: colors.topLabelBgColor || "#fff",
|
|
8
8
|
border: isSoldOut
|
|
9
9
|
? "1px solid #ccc"
|
|
10
10
|
: `1px solid ${colors.topLabelColor}`,
|
|
@@ -3,7 +3,7 @@ import CommonService from "../../utils/CommonService";
|
|
|
3
3
|
const ServiceBadgesMobile = ({ showTopLabel, isSoldOut, colors, renderIcon, serviceItem, isConexion, isAllinBus = false, boardingName, }) => {
|
|
4
4
|
return (React.createElement("div", { className: "absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10" },
|
|
5
5
|
showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] h-[24px] z-20`, style: {
|
|
6
|
-
backgroundColor: "#fff",
|
|
6
|
+
backgroundColor: colors.topLabelBgColor || "#fff",
|
|
7
7
|
border: isSoldOut
|
|
8
8
|
? "1px solid #ccc"
|
|
9
9
|
: `1px solid ${colors.topLabelColor}`,
|
package/package.json
CHANGED
|
@@ -539,7 +539,7 @@ function ServiceItemPB({
|
|
|
539
539
|
serviceItem?.is_direct_trip ||
|
|
540
540
|
serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
|
|
541
541
|
showTopLabel
|
|
542
|
-
? "mt-[
|
|
542
|
+
? "mt-[20px]"
|
|
543
543
|
: "mt-[20px]"
|
|
544
544
|
} `}
|
|
545
545
|
>
|
|
@@ -572,7 +572,7 @@ function ServiceItemPB({
|
|
|
572
572
|
className=" pt-[20px]"
|
|
573
573
|
style={{
|
|
574
574
|
padding:
|
|
575
|
-
hasDpEnabled ||
|
|
575
|
+
hasDpEnabled || (isNewUiEnabled && !isSoldOut)
|
|
576
576
|
? "20px 15px 10px 15px"
|
|
577
577
|
: coachKey
|
|
578
578
|
? "20px 15px 20px 15px"
|
package/src/ui/OfferBanner.tsx
CHANGED
|
@@ -251,15 +251,17 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
|
|
|
251
251
|
|
|
252
252
|
return (
|
|
253
253
|
<div
|
|
254
|
-
className="text-white
|
|
254
|
+
className="text-white w-full absolute -bottom-[40px] pt-[20px] rounded-b-[14px] text-[14px] mt-[10px]"
|
|
255
255
|
style={{
|
|
256
256
|
background,
|
|
257
257
|
opacity: isSoldOut ? 0.5 : 1,
|
|
258
|
-
zIndex: isLinatal ? "-1" : "",
|
|
258
|
+
zIndex: isLinatal ? "-1" : "-1",
|
|
259
259
|
}}
|
|
260
260
|
>
|
|
261
|
-
<div className="flex justify-
|
|
262
|
-
<div className="flex items-center">
|
|
261
|
+
<div className="flex justify-start items-center h-[44px] w-full gap-[20px] px-[15px]">
|
|
262
|
+
<div className="flex items-center justify-start">
|
|
263
|
+
{renderLeftContent()}
|
|
264
|
+
</div>
|
|
263
265
|
{showViewers && (
|
|
264
266
|
<ViewersCount
|
|
265
267
|
serviceItem={serviceItem}
|
|
@@ -37,7 +37,7 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
|
|
|
37
37
|
<div
|
|
38
38
|
className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`}
|
|
39
39
|
style={{
|
|
40
|
-
backgroundColor: colors.topLabelBgColor || "
|
|
40
|
+
backgroundColor: colors.topLabelBgColor || "#fff",
|
|
41
41
|
border: isSoldOut
|
|
42
42
|
? "1px solid #ccc"
|
|
43
43
|
: `1px solid ${colors.topLabelColor}`,
|
|
@@ -35,7 +35,7 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
|
|
|
35
35
|
<div
|
|
36
36
|
className={`flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] h-[24px] z-20`}
|
|
37
37
|
style={{
|
|
38
|
-
backgroundColor: "#fff",
|
|
38
|
+
backgroundColor: colors.topLabelBgColor || "#fff",
|
|
39
39
|
border: isSoldOut
|
|
40
40
|
? "1px solid #ccc"
|
|
41
41
|
: `1px solid ${colors.topLabelColor}`,
|