kupos-ui-components-lib 9.1.0 → 9.1.2
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/ServiceItemDesktop.js +13 -14
- package/dist/components/ServiceItem/ServiceItemMobile.js +12 -13
- package/dist/styles.css +6 -0
- package/dist/ui/AmenitiesBlock.js +4 -1
- package/dist/ui/BottomAmenities/BottomAmenities.js +0 -1
- package/dist/utils/CommonService.js +2 -0
- package/package.json +1 -1
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +19 -17
- package/src/components/ServiceItem/ServiceItemMobile.tsx +18 -17
- package/src/ui/AmenitiesBlock.tsx +3 -1
- package/src/ui/BottomAmenities/BottomAmenities.tsx +0 -1
- package/src/utils/CommonService.ts +2 -0
|
@@ -287,7 +287,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
287
287
|
? "6px"
|
|
288
288
|
: "0",
|
|
289
289
|
} }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
|
|
290
|
-
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12.5px] text-[#464647] mt-1 text-center" }, "\u00A1
|
|
290
|
+
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12.5px] text-[#464647] mt-1 text-center" }, "\u00A1\u00DAltimos Asientos!")))) : null,
|
|
291
291
|
React.createElement(KuposButton, { isSoldOut: isSoldOut, isLoading: serviceDetailsLoading, buttonColor: colors.kuposButtonColor, buyLabel: translation === null || translation === void 0 ? void 0 : translation.buyButton, soldOutLabel: translation === null || translation === void 0 ? void 0 : translation.soldOutButton, soldOutIcon: renderIcon("soldOutIcon", "14px"), onClick: checkMidnight }))),
|
|
292
292
|
React.createElement(BottomAmenities, { otherItems: otherItems, serviceItem: serviceItem, grayscaleClass: grayscaleClass, isSoldOut: isSoldOut, isItemExpanded: isItemExpanded, colors: colors, translation: translation, getAnimationIcon: getAnimationIcon, downArrowIcon: renderIcon("downArrow", "10px"), onToggleExpand: () => setIsExpand &&
|
|
293
293
|
setIsExpand(isItemExpanded ? null : serviceItem.id) }))),
|
|
@@ -306,19 +306,18 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
306
306
|
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
|
|
307
307
|
opacity: isSoldOut ? 0.5 : 1,
|
|
308
308
|
} },
|
|
309
|
-
React.createElement(
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
} }))))),
|
|
309
|
+
React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "18px", height: "18px" }),
|
|
310
|
+
React.createElement("div", { className: "flex items-center mt-[2px]" },
|
|
311
|
+
React.createElement("span", { className: "bold-text ml-[6px]" },
|
|
312
|
+
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "",
|
|
313
|
+
"\u00A0"),
|
|
314
|
+
" ",
|
|
315
|
+
"| Termina en\u00A0",
|
|
316
|
+
React.createElement("span", { className: "bold-text text-end", ref: startCountdown, style: {
|
|
317
|
+
fontVariantNumeric: "tabular-nums",
|
|
318
|
+
display: "inline-block",
|
|
319
|
+
// minWidth: "70px",
|
|
320
|
+
} })))),
|
|
322
321
|
React.createElement("div", { className: "absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 " },
|
|
323
322
|
showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`, style: {
|
|
324
323
|
backgroundColor: isSoldOut
|
|
@@ -141,19 +141,18 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
141
141
|
left: "0px",
|
|
142
142
|
opacity: isSoldOut ? 0.5 : 1,
|
|
143
143
|
} },
|
|
144
|
-
React.createElement(
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
} }))))),
|
|
144
|
+
React.createElement(LottiePlayer, { animationData: serviceItem.icons.promoAnim, width: "18px", height: "18px" }),
|
|
145
|
+
React.createElement("div", { className: " flex items-center mt-[2px]" },
|
|
146
|
+
React.createElement("span", { className: "ml-[6px] text-[#fff] min-[380px]:text-[11px] text-[6px]" },
|
|
147
|
+
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "",
|
|
148
|
+
"\u00A0"),
|
|
149
|
+
" ",
|
|
150
|
+
"| Termina en\u00A0",
|
|
151
|
+
React.createElement("span", { className: "bold-text", ref: startCountdown, style: {
|
|
152
|
+
fontVariantNumeric: "tabular-nums",
|
|
153
|
+
display: "inline-block",
|
|
154
|
+
// minWidth: "70px",
|
|
155
|
+
} })))),
|
|
157
156
|
React.createElement("div", { className: "absolute -top-[14px] left-0 w-full flex items-center justify-end gap-[12px] pr-[13px] z-10 " },
|
|
158
157
|
showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2px] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20 `, style: {
|
|
159
158
|
backgroundColor: isSoldOut ? "#ccc" : colors.ratingBottomColor,
|
package/dist/styles.css
CHANGED
|
@@ -219,6 +219,9 @@
|
|
|
219
219
|
.ml-\[5px\] {
|
|
220
220
|
margin-left: 5px;
|
|
221
221
|
}
|
|
222
|
+
.ml-\[6px\] {
|
|
223
|
+
margin-left: 6px;
|
|
224
|
+
}
|
|
222
225
|
.ml-\[8px\] {
|
|
223
226
|
margin-left: 8px;
|
|
224
227
|
}
|
|
@@ -707,6 +710,9 @@
|
|
|
707
710
|
.text-left {
|
|
708
711
|
text-align: left;
|
|
709
712
|
}
|
|
713
|
+
.text-\[6px\] {
|
|
714
|
+
font-size: 6px;
|
|
715
|
+
}
|
|
710
716
|
.text-\[10px\] {
|
|
711
717
|
font-size: 10px;
|
|
712
718
|
}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
const DEFAULT_PRIORITY_IDS = ["2", "3", "13"];
|
|
3
3
|
const TOOLTIP_CLASS = "hidden group-hover:block absolute top-[30px] left-1/2 -translate-x-1/2 text-white rounded-[14px] whitespace-nowrap mt-2.5 text-center shadow-service text-[13.33px]";
|
|
4
|
-
const getAmenityBaseName = (amenityStr) => {
|
|
4
|
+
const getAmenityBaseName = (amenityStr) => {
|
|
5
|
+
var _a;
|
|
6
|
+
return (_a = amenityStr === null || amenityStr === void 0 ? void 0 : amenityStr.split(".")[0]) !== null && _a !== void 0 ? _a : "";
|
|
7
|
+
};
|
|
5
8
|
const isWater = (amenityStr) => { var _a; return ((_a = getAmenityBaseName(amenityStr)) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === "WATER"; };
|
|
6
9
|
const TooltipArrow = ({ color }) => (React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: { borderBottomColor: color } }));
|
|
7
10
|
const getAmenitySplit = ({ isPeru, amenities, priorityIds }) => {
|
|
@@ -3,7 +3,6 @@ import LottiePlayer from "../../assets/LottiePlayer";
|
|
|
3
3
|
import FlexibleBlock from "../FlexibleBlock";
|
|
4
4
|
import PetBlock from "../PetBlock";
|
|
5
5
|
function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, }) {
|
|
6
|
-
console.log("🚀 ~ BottomAmenities ~ isItemExpanded:", isItemExpanded);
|
|
7
6
|
const hasPetInfo = serviceItem.pet_seat_info &&
|
|
8
7
|
Object.keys(serviceItem.pet_seat_info).length > 0;
|
|
9
8
|
const showDownArrow = ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_change_ticket) && serviceItem.pet_seat_info) ||
|
package/package.json
CHANGED
|
@@ -562,7 +562,7 @@ function ServiceItemPB({
|
|
|
562
562
|
{serviceItem?.available_seats < 10 &&
|
|
563
563
|
serviceItem?.available_seats > 0 && (
|
|
564
564
|
<div className="text-[12.5px] text-[#464647] mt-1 text-center">
|
|
565
|
-
|
|
565
|
+
¡Últimos Asientos!
|
|
566
566
|
</div>
|
|
567
567
|
)}
|
|
568
568
|
</div>
|
|
@@ -625,7 +625,7 @@ function ServiceItemPB({
|
|
|
625
625
|
opacity: isSoldOut ? 0.5 : 1,
|
|
626
626
|
}}
|
|
627
627
|
>
|
|
628
|
-
<div className="flex justify-between items-center w-full">
|
|
628
|
+
{/* <div className="flex justify-between items-center w-full">
|
|
629
629
|
<div className="flex items-center">
|
|
630
630
|
<LottiePlayer
|
|
631
631
|
animationData={getAnimationIcon("bombAnimation")}
|
|
@@ -649,25 +649,27 @@ function ServiceItemPB({
|
|
|
649
649
|
}}
|
|
650
650
|
/>
|
|
651
651
|
</div>
|
|
652
|
-
</div>
|
|
653
|
-
|
|
652
|
+
</div> */}
|
|
653
|
+
<LottiePlayer
|
|
654
654
|
animationData={getAnimationIcon("bombAnimation")}
|
|
655
655
|
width="18px"
|
|
656
656
|
height="18px"
|
|
657
657
|
/>
|
|
658
|
-
<
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
658
|
+
<div className="flex items-center mt-[2px]">
|
|
659
|
+
<span className="bold-text ml-[6px]">
|
|
660
|
+
{serviceItem?.offer_text || ""}
|
|
661
|
+
</span>{" "}
|
|
662
|
+
| Termina en
|
|
663
|
+
<span
|
|
664
|
+
className="bold-text text-end"
|
|
665
|
+
ref={startCountdown}
|
|
666
|
+
style={{
|
|
667
|
+
fontVariantNumeric: "tabular-nums",
|
|
668
|
+
display: "inline-block",
|
|
669
|
+
// minWidth: "70px",
|
|
670
|
+
}}
|
|
671
|
+
/>
|
|
672
|
+
</div>
|
|
671
673
|
</div>
|
|
672
674
|
)}
|
|
673
675
|
<div className="absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 ">
|
|
@@ -317,7 +317,7 @@ function ServiceItemMobile({
|
|
|
317
317
|
opacity: isSoldOut ? 0.5 : 1,
|
|
318
318
|
}}
|
|
319
319
|
>
|
|
320
|
-
<div className="flex justify-between items-center w-full">
|
|
320
|
+
{/* <div className="flex justify-between items-center w-full">
|
|
321
321
|
<div className="flex items-center">
|
|
322
322
|
<LottiePlayer
|
|
323
323
|
animationData={serviceItem.icons.bombAnim}
|
|
@@ -341,26 +341,27 @@ function ServiceItemMobile({
|
|
|
341
341
|
}}
|
|
342
342
|
/>
|
|
343
343
|
</div>
|
|
344
|
-
</div>
|
|
345
|
-
|
|
344
|
+
</div> */}
|
|
345
|
+
<LottiePlayer
|
|
346
346
|
animationData={serviceItem.icons.promoAnim}
|
|
347
347
|
width="18px"
|
|
348
348
|
height="18px"
|
|
349
349
|
/>
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
350
|
+
<div className=" flex items-center mt-[2px]">
|
|
351
|
+
<span className="ml-[6px] text-[#fff] min-[380px]:text-[11px] text-[6px]">
|
|
352
|
+
{serviceItem?.offer_text || ""}
|
|
353
|
+
</span>{" "}
|
|
354
|
+
| Termina en
|
|
355
|
+
<span
|
|
356
|
+
className="bold-text"
|
|
357
|
+
ref={startCountdown}
|
|
358
|
+
style={{
|
|
359
|
+
fontVariantNumeric: "tabular-nums",
|
|
360
|
+
display: "inline-block",
|
|
361
|
+
// minWidth: "70px",
|
|
362
|
+
}}
|
|
363
|
+
/>
|
|
364
|
+
</div>
|
|
364
365
|
</div>
|
|
365
366
|
)}
|
|
366
367
|
|
|
@@ -6,7 +6,9 @@ const DEFAULT_PRIORITY_IDS = ["2", "3", "13"];
|
|
|
6
6
|
const TOOLTIP_CLASS =
|
|
7
7
|
"hidden group-hover:block absolute top-[30px] left-1/2 -translate-x-1/2 text-white rounded-[14px] whitespace-nowrap mt-2.5 text-center shadow-service text-[13.33px]";
|
|
8
8
|
|
|
9
|
-
const getAmenityBaseName = (amenityStr) =>
|
|
9
|
+
const getAmenityBaseName = (amenityStr) => {
|
|
10
|
+
return amenityStr?.split(".")[0] ?? "";
|
|
11
|
+
};
|
|
10
12
|
|
|
11
13
|
const isWater = (amenityStr) =>
|
|
12
14
|
getAmenityBaseName(amenityStr)?.toUpperCase() === "WATER";
|
|
@@ -38,7 +38,6 @@ function BottomAmenities({
|
|
|
38
38
|
downArrowIcon,
|
|
39
39
|
onToggleExpand,
|
|
40
40
|
}: BottomAmenitiesProps): React.ReactElement {
|
|
41
|
-
console.log("🚀 ~ BottomAmenities ~ isItemExpanded:", isItemExpanded);
|
|
42
41
|
const hasPetInfo =
|
|
43
42
|
serviceItem.pet_seat_info &&
|
|
44
43
|
Object.keys(serviceItem.pet_seat_info).length > 0;
|